Dynamic Table Rows + Chained Select

Question

I need the ability to dynamically add and remove an indefinite number of table rows. I also need the ability to chain select boxes within those table rows. I get the expected result (which is wrong), but I'm not a Javascript buff and I have no idea what I'm doing.

I'm using the chained.js script from Mika Tuupola and the "dynamic table" script found pretty much anywhere.

<table id="table">
<tr><td><input id="dept" name="dept[]" /></td>
    <td><input id="service" name="service[]" /></td>
    <td><input id="reason" name="reason[]" /></td>
</tr>
</table>

<script language="javascript">
     $("#service").chained("#dept");
     $("#reason").chained("#dept");

     function addRow(table) {
          var row = $('#table tbody>tr:last').clone(false);
          row.insertAfter('#table tbody>tr:last');
     }

     function delRow(el) {

          while (el.parentNode && el.tagName.toLowerCase() != 'tr') {
               el = el.parentNode;
      }

          if (el.parentNode && el.parentNode.rows.length > 2) {
               el.parentNode.removeChild(el);
          }
     }
</script>

Hopefully that's enough to get the point across.

The obvious happens, since the chained select is based on ID. Once you make selections in the first drop down, the "child" drop downs are chained to that first one.

My suspicion is that I need to somehow modify the ID for each of those select boxes and then increment the IDs in the chaining assignments. But I also suspect that there's probably an easier way to do it or that it's going to require some kind of delegation, since I might need to destroy and reassign the chain after adding the table row...?

I have no idea. Any pointer in the right direction would be greatly appreciated.

UPDATE

I made a fiddle. It only works in Chrome. Some combinations of frameworks/extensions work and partially work in other browsers. But the only one I could make the example work in was Chrome. Sorry, I don't have a lot of practice with JSFiddle.

http://jsfiddle.net/J2Vef/11/

Note what happens if you select an option from the first dropdown, then add a row. All options in the second drop down for added rows will be the options for the first dropdown in the first row.

If you add a row and then start trying to select options, no matter what you put in the first drop down, the second drop down never becomes active.

Answer 1

Give something like this a try. The problem you are running up against is that you can only have one element with one id. In the example you provided you were cloning the table row element but not changing the id name for the selects. In additional you would also need to chain the new selects together by their new id's.

Here is the jsFiddle

I am sure that they may be a cleaner way to write this code block but it will help get you going again.

 var row = $('#tableID tbody:first').html();
 $("#series").chained("#mark");

 function addRow(tableID) {
      $(row).appendTo('#tableID');
      var rowCnt = $('#tableID tbody>tr').length;

     $('#tableID tbody>tr:last select:first').attr('id','mark'+rowCnt);
     $('#tableID tbody>tr:last select:last').attr('id','series'+rowCnt);

    $('#series'+rowCnt).chained("#mark"+rowCnt);
  }