Change select array name with a counter

[Annuscha]

Hi,

I'm trying to chage the name of 3 select boxes, I got the input name to change correctly but I'm pulling my hair out with the select boxes. If you check fiddle after cloning the text fields name chages to name="dose_value[a1]", each time it's cloned a number gets added. I want the same to happen with the select boxes. Can someone please help me with this?

Html:

<table align="left" id="show2">
    <tr>
        <td align="left" colspan="2" align="center">
            <div class="employmentHistory">
                <table width="700px" class="employmentHistoryForm" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="left">
                            <table class="medication_Group" align="left" style="padding-left: 50px;">
                                <tr class="row2">
                                    <td class="text-fields" align="right">Dose value</td>
                                    <td align="left" class="text-fields">
                                        <input style="width: 60px;" value="" class="admin-input" type="text" name="dose_value[]" />&nbsp;
                                        <select style="width: 70px;" class="select-input" name="dose[]">
                                            <option selected value="0">Dose</option>
                                            <option value="g">g</option>
                                            <option value="Mg">Mg</option>
                                            <option value="&mu;g">&mu;g</option>
                                            <option value="ml">ml</option>
                                            <option value="Drops">Drops</option>
                                            <option value="Amps">Amps</option>
                                            <option value="Puffs">Puffs</option>
                                        </select>&nbsp;
                                        <select style="width: 95px;" class="select-input" name="frequency[]">
                                            <option selected value="0">Frequency</option>
                                            <option value="Daily">Daily</option>
                                            <option value="Bd">Bd</option>
                                            <option value="Tds">Tds</option>
                                            <option value="Qid">Qid</option>
                                            <option value="4 hourly">4 hourly</option>
                                            <option value="Nocte">Nocte</option>
                                            <option value="Alternate day">Alternate day</option>
                                            <option value="Weekly">Weekly</option>
                                        </select>&nbsp;
                                        <select style="width: 70px;" class="select-input" name="route[]">
                                            <option selected value="">Route</option>
                                            <option value="PO">PO</option>
                                            <option value="PR">PR</option>
                                            <option value="S/C">S/C</option>
                                            <option value="IM">IM</option>
                                            <option value="IV">IV</option>
                                            <option value="Eyes">Eyes</option>
                                            <option value="Nebs">Nebs</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td align="left" colspan="2" style="padding-left: 300px;"><span style="cursor: pointer; color: #007FC6; font-weight: bold;" id="btnAddMore" value="add more">Add another Medication</span>

        </td>
    </tr>
</table>

Javascript:

 $(document).ready(function () {
     //This line clones the row inside the '.row' class and transforms it to plain html.
     var clonedRow = $('.row2').clone().html();

     //This line wraps the clonedRow and wraps it <tr> tags since cloning ignores those tags
     var appendRow = '<tr class = "row2">' + clonedRow + '</tr>';
     var counter = 0;
     $('#btnAddMore').click(function () {
         //this line get's the last row and appends the appendRow when it finds the correct row.
         $('.employmentHistoryForm tr:last').after(appendRow);

         counter++;
         $('.employmentHistoryForm tr:last input[type="text"]').attr('name', 'dose_value[' + 'a' + counter + ']');
         $('.employmentHistoryForm tr:last select').attr('name', 'dose[' + 'a' + counter + ']');
         $('.employmentHistoryForm tr:last select').attr('name', 'frequency[' + 'a' + counter + ']');
         $('.employmentHistoryForm tr:last select').attr('name', 'route[' + 'a' + counter + ']');
         $('.employmentHistoryForm tr:last').find('input').val('');


     });

     //when you click on the button called "delete", the function inside will be triggered.
     $('.deleteThisRow').live('click', function () {
         var rowLength = $('.row2').length;
         //this line makes sure that we don't ever run out of rows.
         if (rowLength > 1) {
             deleteRow(this);
         } else {
             $('.employmentHistoryForm tr:last').after(appendRow);
             deleteRow(this);
         }
     });

     function deleteRow(currentNode) {
         $(currentNode).parent().parent().remove();
     }
 });

I also added my code to fiddle: Click Here

[JorgeM]

Try the :nth-last-child() Selector

$('.employmentHistoryForm tr:last input[type="text"]').attr('name', 'dose_value[' + 'a' + counter + ']');
$('.employmentHistoryForm tr select:nth-last-child(3)').attr('name', 'dose[' + 'a' + counter + ']');
$('.employmentHistoryForm tr select:nth-last-child(2)').attr('name', 'frequency[' + 'a' + counter + ']');
$('.employmentHistoryForm tr select:nth-last-child(1)').attr('name', 'route[' + 'a' + counter + ']');

http://jsfiddle.net/H9w7d/4/

[Annuscha]

Thank you for your help, I went to check on fiddle. What happens now is it makes all the rows the same name. On row one it's route[a1] and when you clone the row the second row is also route[a1] I need it to add a number when the the row get's cloned. Is there any way of doing it?

[JorgeM]

Yes, I updated the jsfiddle a bit to address that. I didnt take that into consideration on my previous update. sorry about that...

http://jsfiddle.net/H9w7d/6/