Unable to make this searchable dropdown plugin work

Unable to make this searchable dropdown plugin work

Hi,
I am using <select> element where the data comes from database and using  https://github.com/alxlit/bootstrap-chosen this for searchable dropdown.

It works fine with the <select> when present on the page.

Now my problem is the <select>  element  is being generated dynamically with jquery and the data list coming from database is also being inserted through ajax and the Chosen plugin does not work for this.

Is there any way I can get it working? or any other plugin suggestion?

below is the code for generating dynamic <select> and inserting the datalist for the values/option in dropdown

First dropdown is hardcoded html and the rest are generate with the below code





var newTextBoxDiv = $(document.createElement('div'))
    .attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<div class="row"><div class="col-lg-1"><table><tr><td><a  data-toggle="popover" id="iconimg'+ counter + '" data-placement="right" class="btn btn-xs"  data-pimg="0"><img src="qicon.png" width="20px" height="20px"> </a></td> <td><a data-toggle="modal" class="btn btn-default btn-sm btn-beta"  id="history'+ counter + '" ><strong>H</strong></a></td> </tr></table></div><div class="col-lg-5"><select name="item_id[]" id="item_id' + counter + '" class="form-control input-sm chosen-select "></select></div>' + ' ' + '<div class="col-lg-2"> <input type="text" class="form-control input-sm" name="qty[]" autocomplete="off" id="qty' + counter + '"  value=""></div>' + ' ' + '<div class="col-lg-2"> <input type="text" class="form-control input-sm" name="price[]"  id="price' + counter + '"  value=""></div>' + ' ' + '<div class="col-lg-2"> <input type="text"  tabindex="-1" class="form-control input-sm"  readonly name="amount[]" id="amount' + counter + '"  value=""></div> </div>');
 
newTextBoxDiv.appendTo("#TextBoxesGroup");
 
 
counter++;
// for populating the slect box the select
$.post('result.php', function(data){
//$('[id^=item_id]').html(data); });
$('#item_id'+(counter-1)).html(data); });
//END for populating the slect box the select
     });
 
     $("#removeButton").click(function () {
if(counter==2){
          alert("No more textbox to remove");
          return false;
       }   
 
counter--;
 
        $("#TextBoxDiv" + counter).remove();
 
     });
 
     $("#getButtonValue").click(function () {
 
var msg = '';
for(i=1; i<counter; i++){
     msg += "\n Textbox #" + i + " : " + $('#store_value' + i).val();
 msg += "value #" + i + " : " + $('#display_text' + i).val();
 
}
     alert(msg);
     });
 
$("#element_type").change(function(){
 var type1= $(this).val();
 if(type1==3){$(".dynamic").hide("slow"); } else {$(".dynamic").show("slow");}
 
 
});
  });


Thanks for any help.