jQuery Chosen with dynamic added selectboxes

Question

You can dynamicly add selectboxes by clicking on '+' in the #newchosen div

<script type="text/javascript">
$("#content").on("click", "#newchosen", function() {
    $("#clone_hidden").clone().appendTo($("#cloneoutput"));
});
</script>

This is the div that gets cloned and add to #cloneoutput

<div style="display: none;">
    <div id="clone_hidden">
        <table>
        <tr>
        <td>
            <select name="color" id="color" class="chosen-color" data-placeholder="{$choose_color}">
            <option value=""></option>
            {loop="arr_colors"}
                <option value="{$key}">{$value}</option>
            {/loop}
            </select>
        </td>
        <td>
            <select name="grape" id="grape" class="chosen-grape" data-placeholder="{$choose_grape}">
            <option value=""></option>
            {loop="arr_grapes"}
                <option value="{$key}">{$value}</option>
            {/loop}
            </select>
        </td>
        <td>
            <select name="quality" id="quality" class="chosen-quality" data-placeholder="{$choose_quality}">
            <option value=""></option>
            {loop="arr_quality"}
                <option value="{$key}">{$value}</option>
            {/loop}
            </select>
        </td>
        <td>
            <input type="text" name="quantity" id="quantity" value="" maxlength="10" class="smalltextinput" />
        </td>
        </tr>
        </table>
    </div>
</div>

So the problem is that only the first selectbox of color, grape and quality works because it simply has the same name as the duplicates. However if i add [] to the id and name of the selectboxes Chosen get errors and doesnt work at all anymore.

So my question is, how can I make chosen work with array fields? like

select name=color[] id=color[]

Thanks for your attention! Have a good day.

Answer 1

I fixed this by changing the div clone_hidden id to something unique

<script type="text/javascript">
var count = 0;
$("#content").on("click", "#newchosen", function() {
    count++;
    $("#clone_hidden").clone().attr('id','clone'+ count +'').appendTo($("#cloneoutput"));
    $("#clone" + count +" select").chosen({disable_search: true, width: "150px"});
});

</script>