How to observe checked event for different radio button groups?

I have created a new checkout step in which each product is listed along with the option to select which delivery method to use normal shipping or store pickup. I have displayed the product information along with the radio buttons.

delivery-method.html

<!--Use 'stepCode' as id attribute-->
<li data-bind="fadeVisible: isVisible, attr: { id: stepCode }">
<!-- <div class="step-title" data-bind="i18n: stepTitle" data- 
role="title"></div> -->

<div id="checkout-step-title"
     class="step-content"
     data-role="content">
     <div class="step-title"  data-role="title">How do you want to get your Order?</div>

    <!-- Product listing along with delivery methods -->
    <div class="delivery-method-product-listing" data-bind="foreach: getProductItems()">
      <div class="delivery-method-product-item">
        <h2>Order Details (<span data-bind="text: $index() + 1"></span>)</h2>
        <div>
          <div class="delivery-method-product-image">
            <img data-bind="attr: {'src': product_image_url}, src: product_image_url" />
          </div>
          <div class="delivery-method-product-details">
            <h4 data-bind="text: product_name"></h4>
            <h5 data-bind="text:product_price"></h5>
            <h6 data-bind="text: product_qty"></h6>
          </div>
        </div>
        <div class="delivery-methods-options">
          <h4>Delivery Method</h4>
          <label>
              <input  type="radio" value="Shipping"
                       data-bind="attr: { name: 'delivery-product-' + $index() },checked: $parent.deliveryMethod" />
              Ship to Home
          </label>

          <label>
              <input  type="radio" value="StorePickup"
                       data-bind="attr: { name: 'delivery-product-' + $index() },checked: $parent.deliveryMethod" />
              Store Pickup
          </label><!--
          <div class="store-pickup-pincode" data-bind="visible: ">
            <input type="text" placeholder="Pin Code" name="pickup-pincode" value="" />
            <input type="submit" name="pickup-submit" value="submit" />
          </div>-->
        </div>

        <!-- -->
      </div>
    </div>


    <!--- Next button -->
    <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
        <div class="actions-toolbar">
            <div class="primary">
                <button data-role="opc-continue" type="submit" class="button action continue primary">
                    <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                </button>
            </div>
        </div>
    </form>
</div>

delivery-method-step.js

define(
[
    'ko',
    'uiComponent',
    'underscore',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Checkout/js/model/quote',
    'Magento_Customer/js/model/customer'
],
function (
    ko,
    Component,
    _,
    stepNavigator,
    quote,
    customer
) {
    'use strict';
    /**
    * delivery-method - is the name of the component's .html template
    */
    var imageData = window.checkoutConfig.imageData;
    return Component.extend({
        defaults: {
            template: 'Sample_DeliveryMethod/delivery-method'
        },
        imageData: imageData,
        //add here your logic to display step,
        isVisible: ko.observable(true),
        isLogedIn: customer.isLoggedIn(),
        //step code will be used as step content id in the component template
        stepCode: 'deliverySelection',
        //step title value
        stepTitle: 'Delivery Method',
        getItems: ko.observableArray(quote.getItems()),
        getTotals: quote.getTotals(),
        /**
         * @param {Integer} item_id
         * @return {null}
         */
        getSrc: function (item_id) {
            if (this.imageData[item_id]) {

                return this.imageData[item_id].src;
            }

            return null;
        },
        //return product details to be shown on delivery method page
        getProductItems: function() {
            var self = this;
            var items = this.getTotals().items;
            var productItems = [];
            items.forEach(function(item) {

              var productItem = {
                item_id: item.item_id,
                product_name: item.name,
                product_price: Number(item.price).toFixed(2),
                product_qty: item.qty,
                product_image_url: self.getSrc(item.item_id)
              }
              productItems.push(productItem);
            });
            return productItems.length !== 0 ? productItems: null;
        },
        /**
        *
        * @returns {*}
        */
        initialize: function () {
            this._super().observe({
                 deliveryMethod: ko.observable("Shipping")
             });
             this.deliveryMethod.subscribe(function (newValue) {
               if(newValue){
                    console.log('checked'+newValue);
               }
             },this);
            // register your step
            stepNavigator.registerStep(
                this.stepCode,
                //step alias
                null,
                this.stepTitle,
                //observable property with logic when display step or hide step
                this.isVisible,

                _.bind(this.navigate, this),

                /**
                * sort order value
                * 'sort order value' < 10: step displays before shipping step;
                * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                * 'sort order value' > 20 : step displays after payment step
                */
                5
            );

            return this;
        },

        /**
        * The navigate() method is responsible for navigation between checkout step
        * during checkout. You can add custom logic, for example some conditions
        * for switching to your custom step
        */
        navigate: function () {

        },

        /**
        * @returns void
        */
        navigateToNextStep: function () {
            stepNavigator.next();
        }
    });
}
);

By default, Shipping is selected but when store pickup is selected I have to display the store pickup field and this has to happen for each product item independently. Help, please.