jQuery - dynamically adding CSS to html (puzzling)

Question

I have a "add another field" for the user in case they need to add more ingredients. This field gets dynamically added via jquery. Here is the image of the default field and the code for adding this field;

Creating similar element for add another field

var element_ing = $('<div class="f-row ingredient">\
                        <div class="medium">\
                            <input type="text"/>\
                        </div>\
                        <div class="quantity">\
                            <input type="text"/>\
                        </div>\
                        <div class="to">to</div>\
                        <div class="quantity">\
                            <input type="text"/>\
                        </div>\
                        <div class="small">\
                            <select id="unit-dyn">\
                            </select>\
                        </div>\
                        <div class="less-medium">\
                            <select id="prep-method-dyn">\
                            </select>\
                        </div>\
                        <button class="remove" id=remove-ing"></button></div>');

All works well but when the template is rendered the formatting is a bit off, like this;

I found this to be because the rendered template adds a span and div class which is not there in the template but I guess gets added automatically whereas it does add the same span when a dynamic field is added; html for default rendered field

<div class="small" id="unit">

 # the below div gets added automatically
<div class="selector" id="uniform-id_ingredient_set-0-unit" style="width: 90px;">

# the below span gets added automatically 
<span style="width: 76px; -webkit-user-select: none;">Unit</span>

<select id="id_ingredient_set-0-unit" name="ingredient_set-0-unit">
    <option value="" selected="selected">Unit</option>
    <option value="1">mL</option>
</select>
</div>
</div>

HTML for dynamically added field

<select id="unit-dyn">
    <option value="" selected="selected">Unit</option>
    <option value="1">mL</option>
 </select>

While adding a new field I took the default field cloned it and then appended the value to the newly created field.

Is there a way to add the div and span automatically in the dynamically created field just like it gets added on the default field? Thanks for read through the long question.

Answer 1

You are definitely using jQuery UI selectmenu for styling-up drop-downs, which is responsible for adding additional div and span on top of selects. When you're adding new rows into form, selectmenu is not initializing on them. You should reinitialize selectmenu after adding new row.