Custom Toolbar Template for Smart Select Using Picker

1

I would like to customize the toolbar for a smart select when using the picker such as in the following example:

                <li><a href="#" 
                        class="item-link smart-select"
                        data-open-in = "picker"
                        data-virtual-list = "true"
                        data-searchbar ="true"
                        data-searchbar-placeholder="Search accounts"
                    >
                             
                    <select id="accounts" name="Account">
                        <option value=""></option>
                        <!-- javascript smart select items go here -->
                    </select>   
                    <div class="item-content">
                      <div class="item-inner"> 
                        <div class="item-title">Account</div>
                        <div class="item-after" id="disp-accounts"></div>
                      </div>  
                    </div></a> 
                </li>

I see in the documentation under Picker how to do this if I had created my own picker directly, but am not sure how to access the picker instance when created using the above approach.

I also found this on the previous forum https://muut.com/framework7#!/?smart%20select%20picker
which I was able to work by using the suggested:

$("body").on("click",'.item-link.smart-select', function () {
     $(".picker-modal.smart-select-picker.modal-in .toolbar-inner .left").html(htmlString);
},100);
}

However the post also suggests accessing the picker directly in Javascript, which I assume can then be modified using all the methods and properties for pickers listed here: http://framework7.io/docs/picker.html

I am just stuck on how to open the specific picker in javascript, as it seems everytime the smart select picker is opened it is assigned a new name.