JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<div id="home">
<fieldset>
<legend>#1
</legend>
<div class="fieldset-content">
<div>
<select data-placeholder="Choose something" class="classname" name="somthinghere[]">
<option value="123">Somthing</option>
<option value="124">Somthing again</option>
</select>
</div>
<button class="add_field_button btn btn-warning" data-fields="0" name="add">Add more selectfields and use the choosen plugin</button>
</div>
</fieldset>
</div>
JavaScript
var x = 1 ;
$(document).ready(function() {
jQuery('#home select').chosen() ;
jQuery(document).on('click','.add_field_button',function(e) {
makeChosen(false) ;
x++ ;
e.preventDefault();
var add_button = $(this);
var fieldset = add_button.closest('fieldset');
var newFieldset = fieldset.clone(true,false).appendTo('#home') ;
newFieldset.find('select').append('<option value="">Test '+x+'</option>') ;
newFieldset.find('legend').html(x) ;
makeChosen(true) ;
});
});
function makeChosen(status)
{
if ( status ) jQuery('#home select').chosen() ;
else
{
jQuery('#home select').chosen('destroy') ;
}
}