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">
<form class="my-form">
<div class="new-item row">
<select name="transport-type[]">
<option value="">Type</option>
<option value="coach">Coach</option>
<option value="diesel-train">Diesel Train</option>
<option value="electric-train">Electric Train</option>
<option value="trolley">Trolley</option>
<option value="tram">Tram</option>
<option value="city-bus">City Bus</option>
<option value="shuttle">Shuttle</option>
</select>
</div>
</form>
<div class="clearfix">
<a class="add-new btn">Add New</a>
</div>
JavaScript
//Fires up / "attaches" Chosen.js to select
var newGroup = jQuery('.new-item:first').html();
jQuery('select').chosen({
disable_search: false,
disable_search_threshold: 10,
width: '100%'
});
//Add new
var group_id = 0;
jQuery(document).on('click', '.add-new', function() {
group_id++;
jQuery('.my-form').append('<div class="new-item row" id="group_' + group_id + '" >'+newGroup+'</div>');
jQuery('#group_' + group_id + ' select').chosen({
disable_search: true,
disable_search_threshold: 10,
width: '100%'
});
});