jquery form cloning

Question

Hello all i have tried cloning a form and it works great. I a dropdownlist in the all the rows in the form and when one of the option is selected i have to create small box appearing right after the current row. I have also done this but the real problem is that when i add a new row(that is with cloning) and then i select one of the option(which is ASSET) in my case i small box appears nicely but after that if i click the ADD ROW no new row is added. Here is my code and working demo:

http://jsfiddle.net/kkAM6/ help would be appreciated

<table id="expense_table" class="">
    <thead>
        <tr>
            <th>Sl. No</th>
            <th>Particulars</th>
            <th>Type</th>
            <th>Qty</th>
            <th>Rate</th>
            <th>Amount</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr id="row_1">
            <td>1</td>
            <td>
                <input type="text" name="particulars" />
            </td>
            <td>
                <select id="expense_type" name="expense_type" class="exp_type span2">
                    <option value="">---Select---</option>
                    <option value="asset">Asset</option>
                    <option value="non_asset">Non Asset</option>
                </select>
            </td>
            <td>
                <input type="text" name="qty" class="input-small" />
            </td>
            <td>
                <input type="text" name="rate" class="input-small" />
            </td>
            <td>
                <input type="text" name="amount" class="input-small" />
            </td>
            <td>X</td>
        </tr>
        <tr id="row_2">
            <td>2</td>
            <td>
                <input type="text" name="particulars" />
            </td>
            <td>
                <select id="expense_type" name="expense_type" class="exp_type span2">
                    <option value="">---Select---</option>
                    <option value="asset">Asset</option>
                    <option value="non_asset">Non Asset</option>
                </select>
            </td>
            <td>
                <input type="text" name="qty" class="input-small" />
            </td>
            <td>
                <input type="text" name="rate" class="input-small" />
            </td>
            <td>
                <input type="text" name="amount" class="input-small" />
            </td>
            <td>X</td>
        </tr>
        <tr id="row_3">
            <td>3</td>
            <td>
                <input type="text" name="particulars" />
            </td>
            <td>
                <select id="expense_type" name="expense_type" class="exp_type span2">
                    <option value="">---Select---</option>
                    <option value="asset">Asset</option>
                    <option value="non_asset">Non Asset</option>
                </select>
            </td>
            <td>
                <input type="text" name="qty" class="input-small" />
            </td>
            <td>
                <input type="text" name="rate" class="input-small" />
            </td>
            <td>
                <input type="text" name="amount" class="input-small" />
            </td>
            <td>X</td>
        </tr>
    </tbody>
</table>
</div> <span id="add">Add Row</span>  

and the jquery code is:

  $('#add').click(function(){

                    var last_row_id = $('#expense_table tr:last').attr('id').split('_')[1];
                    //alert(last_row_id);
                    $('tr[id="row_1"]').clone().insertAfter('#expense_table tr:last');
                    $('#expense_table tr:last').attr('id','row_'+(parseInt(last_row_id) + 1));

            });// end of #add click event


            var $in = new Array();
            $('.exp_type').live('change',function(){
                var id = $(this).closest('tr').attr('id').split('_')[1];

                if($(this).val() == 'asset'){

                    var div = "<tr id=\"asset_"+id+"\"><td colspan=\"7\"><td></tr>"; 
                    $('#row_'+id).after(div);
                    var $box = $('<div/>').attr('class','asset_details');

                    $in[0] = "<tr><td><label>Assest Type:</label></td><td><select name=\"asset_type\" id=\"asset_type\"><option value=\"\">---Select---</option></select></td></tr>";
                    $in[1] = "<tr><td><label>Name:</label></td><td><input type=\"text\" id=\"name\" name=\"name\"/></td></tr>";
                    $in[2] = "<tr><td><label>Description:</label></td><td><input type=\"text\" id=\"asset_description\" name=\"asset_description\" /></td></tr>";
                    $in[3] = "<tr><td><label>Serial No:</label></td><td><input type=\"text\" id=\"asset_serial_num\" name=\"asset_serial_num\" /></td></tr>";

                    $('#asset_'+id).find('td:first').append($box);
                    $box.append($in);

                } else {

                    $('#asset_'+id).fadeOut(500, function() { $('#asset_'+id).remove(); });
                }


            });//end of #expense_type

Answer 1

When you add an ASSET to the last row of your table, $('#expense_table tr:last') has no id. The last tr is one inside your #asset_x, and not the #asset_x itself.

Try adding class to your rows, for example class='input-row' for standard row (so you can follow the number of rows for naming ids, and class='table-row' for every row including ASSET rows, so you can add a row after the last one.

Here's a fiddle: http://jsfiddle.net/kkAM6/

Here's HTML amended:

<table id="expense_table" class="">
        <thead>
            <tr>
            <th>Sl. No</th>
            <th>Particulars</th>
            <th>Type</th>
            <th>Qty</th>
            <th>Rate</th>
            <th>Amount</th>
            <th>Action</th>
        </tr>
        </thead>

    <tbody>
        <tr id="row_1" class="input-row table-row">
            <td>1</td>
            <td><input type="text" name="particulars" /></td>
            <td>
                <select id="expense_type" name="expense_type" class="exp_type span2">
                    <option value="">---Select---</option>
                    <option value="asset">Asset</option>
                    <option value="non_asset">Non Asset</option>
                </select>
            </td>
            <td><input type="text" name="qty" class="input-small" /></td>
            <td><input type="text" name="rate" class="input-small"  /></td>
            <td><input type="text" name="amount" class="input-small"  /></td>
            <td>X</td>
        </tr>
        <tr id="row_2" class="input-row table-row">
            <td>2</td>
            <td><input type="text" name="particulars" /></td>
            <td>
                <select id="expense_type" name="expense_type" class="exp_type span2">
                    <option value="">---Select---</option>
                    <option value="asset">Asset</option>
                    <option value="non_asset">Non Asset</option>
                </select>
            </td>
            <td><input type="text" name="qty" class="input-small" /></td>
            <td><input type="text" name="rate" class="input-small"  /></td>
            <td><input type="text" name="amount" class="input-small"  /></td>
            <td>X</td>
        </tr>

        <tr id="row_3" class="input-row table-row">
            <td>3</td>
            <td><input type="text" name="particulars" /></td>
            <td>
                <select id="expense_type" name="expense_type" class="exp_type span2">
                    <option value="">---Select---</option>
                    <option value="asset">Asset</option>
                    <option value="non_asset">Non Asset</option>
                </select>
            </td>
            <td><input type="text" name="qty" class="input-small" /></td>
            <td><input type="text" name="rate" class="input-small"  /></td>
            <td><input type="text" name="amount" class="input-small"  /></td>
            <td>X</td>
        </tr>
    </tbody>
    </table>
</div>
<span id="add">Add Row</span>

Here's JS amended:

      $('#add').click(function(){

                var last_row_id = $('#expense_table .input-row:last').attr('id').split('_')[1];
                console.log(last_row_id);
                $('tr[id="row_1"]').clone().insertAfter('#expense_table .table-row:last');
                $('#expense_table tr:last').attr('id','row_'+(parseInt(last_row_id) + 1)).addClass('input-row table-row');

        });// end of #add click event


        var $in = new Array();
        $('.exp_type').live('change',function(){
            var id = $(this).closest('tr').attr('id').split('_')[1];

            if($(this).val() == 'asset'){

                var div = "<tr class=\"table-row\" id=\"asset_"+id+"\"><td colspan=\"7\"><td></tr>"; 
                $('#row_'+id).after(div);
                var $box = $('<div/>').attr('class','asset_details');

                $in[0] = "<tr><td><label>Assest Type:</label></td><td><select name=\"asset_type\" id=\"asset_type\"><option value=\"\">---Select---</option></select></td></tr>";
                $in[1] = "<tr><td><label>Name:</label></td><td><input type=\"text\" id=\"name\" name=\"name\"/></td></tr>";
                $in[2] = "<tr><td><label>Description:</label></td><td><input type=\"text\" id=\"asset_description\" name=\"asset_description\" /></td></tr>";
                $in[3] = "<tr><td><label>Serial No:</label></td><td><input type=\"text\" id=\"asset_serial_num\" name=\"asset_serial_num\" /></td></tr>";

                $('#asset_'+id).find('td:first').append($box);
                $box.append($in);

            } else {

                $('#asset_'+id).fadeOut(500, function() { $('#asset_'+id).remove(); });
            }


        });//end of #expense_type