0

I have some HTML like so

<table class="table table-bordered table-hover" id="actionTable">
    <thead>
    <tr >
        <th class="text-center">Action</th>
        <th class="text-center">Responsibility</th>
        <th class="text-center">Completion Date</th>
    </tr>
    </thead>
    <tbody>
    <tr id='actionRow'>
        <td>
            <input type="text" name='actionInput'  placeholder='Action' class="form-control"/>
        </td>
        <td>
            <select class="responsibility" name="responsibilityInput" id="responsibilityInput">
                <option value="OptionOne">Option One</option>
                <option value="OptionTwo">Option Two</option>
                <option value="OptionThree">Option Three</option>
                <option value="OptionFour">Option Four</option>
            </select>
        </td>
        <td>
            <input type="text" name='dateInput' placeholder='Completion Date' class="form-control"/>
        </td>
    </tr>
    </tbody>
</table>
<a id="add_row" class="btn btn-default pull-right">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>

When the Add Row button is clicked, I need it to clone actionRow. I have this working to some point. This is my JSFiddle As you can see, a row is successfully cloned. However, on cloned rows, the Select box no longer works. This is because I need to destroy the cloned select before I clone it. This answer here explains this problem better Stack Overflow Answer

How could I apply this in my situation though? I am cloning the whole row, not a single select input? How can I clone the select seperately but still have it where I need it to be?

Any help appreciated.

Thanks

Community
  • 1
  • 1
katie hudson
  • 2,765
  • 13
  • 50
  • 93
  • Hi Kate, I suspect the issue could be due to your select input not having a unique ID. –  Feb 09 '16 at 13:29
  • You could also just append the content of that row to the table body instead of cloning. It should make it a tad bit simpler. –  Feb 09 '16 at 13:31
  • 1
    https://jsfiddle.net/fqugd7vL/2/ though you should fix the `id`'s as @Bruno said above. – BenG Feb 09 '16 at 13:32
  • Thanks. Strange thing is, it seems to work in the fiddle, but not on my actual page. It complains that destroy is being called on a non select-2 element – katie hudson Feb 09 '16 at 13:39

0 Answers0