How to use Tom-select dynamically?

Question

There is a table contains Tom select input in my modal. And also I made an add button to add Tom select input. So when I click the add button, I clone the that contains tomselect input, but the tom-select input in the cloned tr doesnt work... How can I use tom-select input dynamically?? here's my code..

show modal : 

        this.show = function(){
            var main = this;
            var items= main.items;
            var modalTitle = "modalTitle";
            var modalMsg = ' <div id="modal-id">';
            modalMsg    += '    <table id = "MyTable" class="table">';
            modalMsg    += '        <tbody>';
            modalMsg    += '            <tr>';
            modalMsg    += '                <th class="col-xs-3"> 25125211  : </th>';
            modalMsg    += '                <td class="col-xs-9"><label class="col-xs-3"><input type="radio" class="input-val" name="confirm_radio" id="approve" value="100" required>apporve</label>';
            modalMsg    += '                <label class="col-xs-3"><input name="confirm_radio" id="refer" type="radio" value="900" required>refer</label></td>';
            modalMsg    += '            </tr>';
            modalMsg    += '            <tr id = "tomselect-tr">';
            modalMsg    += '                <th class="col-xs-3"> chooseTomselectOption </th>';
            modalMsg    += '                <td>';
            modalMsg    += '                   <div class="input-group"><select id="TomSelect_1" placeholder="choose an item..."></select><span class="input-group-btn"><button id="cloneTr" type="button"  class="btn btn-tool"><i class="fa fa-plus"></i></button></span></div>';
            modalMsg    += '                </td>';
            modalMsg    += '            </tr>';       
            modalMsg    += '        </tbody>';
            modalMsg    += '    </table>';
            modalMsg    += ' </div>';
            var modalBtn1Text = "done";
            var modalBtn2Text = "cancel";
            var modalCallback;


            var updateCallback = function(){
                agreementInfo.saveInfo();
            };
            modalCallback = updateCallback;

            this.modal = new _modal.show(modalTitle
                ,modalMsg
                ,modalBtn1Text
                ,modalBtn2Text
                ,modalCallback
            );

cloneTr function :

    function cloneTr(){

        trNum++;
    
        var $newTr= $("#tomselect-tr").clone();     
            

        $newTr.attr("id", "tomselect-tr""+trNum);

       $newTr.find("#TomSelect_1").attr("id","TomSelect_"+trNum);

        $("#MyTable").find("tbody").find("#tomselect-tr"").after($addChoiceGrantorTr);
        
        var targetDiv = "TomSelect_"+trNum;
        
        addSelector(targetDiv);
        
    }

addSelector function

    function addSelector(_targetDiv){

        var selector = new TomSelect("#"+_targetDiv,{
            valueField: 'USR_NO',
            searchField: ['USR_NM', 'USR_ID', 'USR_EMAIL', 'GP_NM'],
            maxItems: 1,
            maxOptions: 100,
            options: items,
            render: {
                option: function(data, escape) {
                    console.log(escape);
                    return  '<div>' +
                        '   <span class="USR_NM">' + escape(data.USR_NM) + '</span>' +
                        '   <span class="GP_NM">' + escape(data.GP_NM) + '</span>' +
                        '   <span class="USR_ID">' + escape(data.USR_ID) + '</span>' +
                        '   <span class="USR_EMAIL">'  + escape(data.USR_EMAIL) + '</span>' +
                        '</div>';
                },
                item: function(data, escape) {
                    return  '<div id="'+itemDivTxt+'" title="' + escape(data.USR_NO) + '" data-name="' + escape(data.USR_NM) + '">' +
                        '   <span class="tom-select-name">' + escape(data.USR_NM) + '</span>' +
                        '   <span class="tom-select-group">' + escape(data.GP_NM) + '</span>' +
                        '</div>';
                }
            }
        });
        selector.clearCache();
    }
    

How can I use tomselect dynamically or initialize when I click the add button?? thanks

Answer 1

I tried to clone the wrong object... I made a temporary tr object and clone it... and It works