how to handle observable in automatically generated li element in foreach loop separately

See more:

Knockout.js

inside a for each loop, using bootstrap i have created dropdown list by ul and li elements. when i click on li element the name of the dropdown should change to the selected one.

i acchved the above functnality by using KnockoutJS obserble variable. but the problem come in selecting a value in dropdown made up of ui and li elements.
insted of renaming a single dropdown name. it actually renaming all dropdown button name which got generated by foreach loop.

please suggest some solution where only selected dropdown name should updated instead of all dropdowns.

below is my HTML and KnockOutJS

<a id="ddlApprType" href="#" class="btn btn-default btn-sm" data-toggle="dropdown" role="button"> <i class="fa fa-rocket"></i> <span class="caret"></span>
                                                          <span data-bind="    text: $root.PRespConfigName_Appr"></span>
                                                     </a>
                                                     <ul class="dropdown-menu " role="menu" aria-labelledby="ddlLikeType">
                    <li class="dropdown-submenu"><a href="#">Professional</a>
                  <ul class="dropdown-menu scrollable-menu" role="menu" data-bind="foreach: { data: $root.SC_ESN_PostResponsesTypeConfigs_Professional, as: 'Professional' }">
                    <li role="presentation">
                        <a href="#" data-bind='click: $root.SC_ESN_PostResponsesTypeConfigslst_Professional'>
                            <img data-bind="    attr: { 'src': Professional.ESN_RespThumbnailImg }" src="#"/>
                            <span data-bind="    text: Professional.ESN_PRespConfigName"></span>
                        </a>
                    </li>
                </ul>
                        </li>
                                                         <li  class="dropdown-submenu"> <a href="#">Personal</a>
                                                              <ul class="dropdown-menu scrollable-menu" role="menu" data-bind="foreach: { data: $parent.SC_ESN_PostResponsesTypeConfigs_Personal, as: 'Personal' }">
                    <li role="presentation">
                        <a href="#" data-bind='click: $root.SC_ESN_PostResponsesTypeConfigslst_Personal'>
                            <img data-bind="    attr: { 'src': Personal.ESN_RespThumbnailImg }" src="#"/>
                            <span data-bind="    text: Personal.ESN_PRespConfigName"></span>
                        </a>
                    </li>
                </ul>
                                                         </li>
                                                         </ul> 

here is my KnockoutJS function to rename the button

self.PRespConfigId_Appr=ko.observable();
        self.PRespConfigName_Appr = ko.observable();
        self.ESN_RespImg_Appr = ko.observable();
        self.ESN_RespThumbnailImg_Appr = ko.observable();

        self.SC_ESN_PostResponsesTypeConfigslst_Personal = function () {
            self.PRespConfigId_Appr(this.ESN_PRespConfigId);
            self.PRespConfigName_Appr(this.ESN_PRespConfigName);
            self.ESN_RespImg_Appr(this.ESN_RespImg);
            self.ESN_RespThumbnailImg_Appr(this.ESN_RespThumbnailImg);
        };</pre>