Dynamic Input Fields in a Table

Question

I have a table of sortable rows with inputs that users can dynamically add more rows to. But now I'd like to be able to group those rows into sets. In theory:

<tr>
  <td><input type="text" name="set[0][name]" value="setname" /></td>
<tr>
<tr>
  <td><input type="text" name="set[0][items][0][itemname]" value="itemname" /><td>
</tr>
<tr>
  <td><input type="text" name="set[0][items][1][itemname]" value="itemname" /><td>
</tr>
<tr>
  <td><input type="text" name="set[1][name]" value="setname" /></td>
<tr>
<tr>
  <td><input type="text" name="set[1][items][0][itemname]" value="itemname" /><td>
</tr>
<tr>
  <td><input type="text" name="set[1][items][1][itemname]" value="itemname" /><td>
</tr>

I'd like both the sets and items to be sortable, so that the user can change the start point of the set by dragging the set row, or change the items in a set by dragging the items (I'm using jQuery sortable UI for this).

The problem I'm having is figuring out how to dynamically add the set and item rows while maintaining the correct array key and value pairs when they are sorted.

Any help is appreciated! Thanks!

Answer 1

$(document).on("click", $('.sortable'), function (e) {
    $('.sortable').sortable({
        start: function (event, ui) {
            var start_pos = ui.item.index();
            ui.item.data('start_pos', start_pos);
        },
        change: function (event, ui) {
            var start_pos = ui.item.data('start_pos');
            var index = ui.placeholder.index();
            if (start_pos < index) {
                $('.sortable :nth-child(' + index + ')').addClass('highlights');
            } else {
                $('.sortable').children(' :eq(' + (index + 1) + ')').addClass('highlights');
            }
        },
        update: function (event, ui) {
            var redirectUrl = $('#hiddenRedirectUpdateOrder').val();
            $.ajax({
                url: redirectUrl,
                type: 'POST',
                cache: false,
                contentType: 'application/json',
                data: JSON.stringify({ orders: $(this).sortable('toArray') }),
            });
            $('.sortable').removeClass('highlights');
        }
    });
});