ms-dropdown Selectbox integrated with ADD/REMOVE TR table select box didn't Work,

Question

I have a problem with my select box. and i use ms-dropdown https://github.com/marghoobsuleman/ms-Dropdown and integrate it with my ADD/REMOVE table row. Here's the whole jquery script.

$(document).ready(function() {
        var id = 0;
            var n = 0;

            // Add button functionality
            $("table.dynatable button.add").click(function(e) {
            e.preventDefault();
                id++;
                n++;
                var master = $(this).parents("table.dynatable");

                // Get a new row based on the prototype row
                var prot = master.find(".prototype").clone();
                prot.attr("class", "")
                prot.find(".id").attr("value", id);
                prot.find(".num").html(n);

                master.find("tbody").append(prot);
            });

            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {
                $(this).closest("tr").remove();

            });

    $(".tech").msDropdown();    

});

And here's the table

<table class="dynatable" align='center' id='dynatable' border='1'>
                        <thead>
                            <tr>
                                <th width='500px' colspan='2'>Window Type</th>
                                <th><button class="add">Add</button></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="prototype">
                                <td width='5px'>
                                    <span class='num'>1</span>
                                </td>
                                <td>
                                <input type="checkbox" name="checkbox[]" value="0" class="id" id='checkbox' style='display:none;' checked/>
                                <select name='prod_type[]' class='tech' style='width:300px;'>   
                                    <option value='' data-description="Select Window/Door"></option><option value='Sample1' data-image="" data-description="This is sample 1">
                                            Sample 1
                                      </option><option value='Sample2' data-image="" data-description="This is sample 2">
                                            Sample 2
                                      </option><option value='Sample 3' data-image="" data-description="This is sample 3">
                                            Sample 3
                                      </select>                             

                                </td>
                                <td>
                                    <button class="remove">X</button>
                                </td>
                            </tr>
</table>

The problem is when you click the Add button it will append a row but the select box seems to be disabled. I wonder why this happen.. please help me.. thanks in advance.

---

Here's the fiddle: http://jsfiddle.net/jc_garcia0527/QzQ2q/

Answer 1

Hi I have seen your code.... and fond the issue....

Refer this LINK to see solved code...

To fix this issue You need to just replace below line in HTML code

<input type="checkbox" name="checkbox[]" value="0" class="id" id='checkbox' style='display:none;' checked/>

with this code line

<input type="checkbox" name="checkbox[]" value="0" class="id" id='checkbox' checked/>

You need to just remove your style='display:none'