JSFiddle - React, Tailwind, and code Playground
HTML
<form role="form" action="/wohoo" method="POST">
<label>Stuff</label>
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<input type="text" name="stuff[]">
<select>
<option class="blank" value="">Select a car</option>
<option value="saab">Saab</option>
<option value="mercedes" selected>Mercedes</option>
<option value="audi">Audi</option>
</select>
<button type="button" class="remove-field">Remove</button>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
</form>
JavaScript
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
var obj = $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
// This following line is incorrect...
obj.siblings('select').find('.blank').prop('selected', true).end().trigger('chosen:updated');
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});