How to set Matrix child items descripton when we select child items options in PDP page

when we select matrix child items in PDP page that respective child items descript will show ad the product description in PDP page using this solution

JavaScript:

EntryPoint:

var layout = container.getComponent('Layout');
                layout.addChildView('Matrix_child_description.view', function() {

                    return new childDescriptionView({ container: container });

                });

View:

// @module jj.Feature.Feature
define('Matrix_child_description.view', [
    'jj_feature_feature.tpl', 'jj.Feature.Feature.Model'



    , 'Backbone'
], function(
    jj_feature_feature_tpl,
    FeatureModel

    , Backbone
) {
    'use strict';

    // @class jj.Feature.Feature.View @extends Backbone.View
    return Backbone.View.extend({

        template: jj_feature_feature_tpl

        ,
        initialize: function(options) {


            var self = this;

            this.options = options
            this.pdp = this.options.container.getComponent('PDP');
            var parentFeature = this.pdp.getItemInfo().item.storedetaileddescription;

            console.log('featureparent', parentFeature);
            this.parentFeature = parentFeature;

            this.pdp.on('afterOptionSelection', function(e) {
                // Get the selected matrix child(s)
                var itemInfo = self.pdp.getItemInfo();
                var matrixChildInfo = itemInfo.item.matrixchilditems_detail;
                try {
                    var selectedFuelType = $('.product-views-option-tile-picker.active:first-child')[0].outerText;
                    var selectedOption = $('.product-views-option-tile-picker.active:last-child')[0].outerText;
                    var selectedMatrixChilds = self.pdp.getSelectedMatrixChilds();
                    _.each(matrixChildInfo, function(each) {
                            if (typeof(selectedFuelType) != undefined && typeof(selectedOption) != undefined) {
                                if (each.custitem22 == selectedOption && each.custitem23 == selectedFuelType) {
                                    if (each.custitem_jj_features == '') {
                                        self.childFeature = parentFeature;
                                    } else {
                                        self.childFeature = each.custitem_jj_features
                                    }
                                }

                            }else{

                                 self.childFeature = parentFeature;
                             }
                        })

                    self.render();
                } catch (error) {

                }

            });


        }

        ,
        events: {}

        ,
        bindings: {}

        ,
        childViews: {

        }

        //@method getContext @return jj.Feature.Feature.View.Context
        ,
        getContext: function getContext() {
            console.log('getcontext this', this)



            var features;
            if (this.childFeature) {
                features = this.childFeature
            } else {
                features = this.parentFeature
            }
            return {
                ItemDescription: features
            };
        }
    });
});

Template:

<div class="product-specific-value">
    <!-- <span class="product-line-specific-label">
      <h3>Feature:</h3> 
      </span> -->

    <div class="product-details-full-featured">
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="product-details-full-panel-heading">
                    <div class="product-details-full-panel-title">
                        <a href="#" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">Features<span><i class="facets-faceted-navigation-item-facet-group-expander-icon"></i></span></a>
                    </div>
                </div>
                <div id="collapse1" class="panel-collapse collapse in">

                    <div class="product-details-full-panel-body">
                        <!-- <span class="product-line-specific-value" itemprop="sku">
                    {{{specificvalue}}} -->
                        {{#if ItemDescription}}
                        <div class="product-details-full-feature-content-full">
                            <span class="product-line-specific-value" itemprop="sku">
                        {{{ItemDescription}}}
                     
                    </div>
                   
                    <div class="product-details-full-feature-more">More v</div>
                    <div class="product-details-full-feature-less product-details-hide-me">Less ^</div>
                  {{/if}}
                </div>
              </span>

                        </div>
                        </span>

                        <!--
  Available helpers:
  {{ getExtensionAssetsPath "img/image.jpg"}} - reference assets in your extension
  
  {{ getExtensionAssetsPathWithDefault context_var "img/image.jpg"}} - use context_var value i.e. configuration variable. If it does not exist, fallback to an asset from the extension assets folder
  
  {{ getThemeAssetsPath context_var "img/image.jpg"}} - reference assets in the active theme
  
  {{ getThemeAssetsPathWithDefault context_var "img/theme-image.jpg"}} - use context_var value i.e. configuration variable. If it does not exist, fallback to an asset from the theme assets folder
-->