.clone() problem

.clone() problem

I have a simple form that has row of input fields where the user can add values, and under one of the input boxes on the next row I have a total.

This type of thing (a simplified version)
  1. <table>
  2. <tr class="dataRow">
  3. <td>[Input box]</td>
  4. <td>[Add new row button]</td>

  5. </tr>
  6. <tr>

  7. <td><span id="Total"></span></td>
  8. <td></td>

  9. </tr>



At the end of each row with the class of 'dataRow' I have a button to add a new row. Clicking this button adds a new row of that type. So no probelm there.

The issue is that the new dataRow type row is getting added UNDER the row that holds the total.

So I'm ending up with this type of thing.
  1. <table>
  2. <tr class="dataRow">
  3. <td>[Input box]</td>
  4. <td></td>

  5. </tr>
  6. <tr>

  7. <td><span id="Total"></span></td>
  8. <td></td>

  9. </tr>


  10. <tr class="dataRow">
  11. <td>[Input box]</td>
  12. <td>[Add new row button]</td>

  13. </tr>
Note the new row has appeared under the row with the total. Not good.

The code that adds the new row in summary looks like this.

  1. function AddNewRow(item) {
      
            var $row = $('.dataRow:last').clone();


That's it in a nutshell. It looks for the last row with the class of dataRow and clones it. Problem is it clones it under a row that is not of the 'dataRow' type!!

What can I do to fix this issue?

Cheers all.