Question

I have seen similar examples but have not seen exactly what I am looking for.
I have created a scheduling system based on the time of day.
This means I have 24 rows.
The first td of each row has a button with the class “go”.
I am trying to create a snippet that… when an individual button is clicked on a specific row that row is cloned and inserted on the next line of the table.
I have accomplished this with a single button and have used the insertAfter object.
I assume I have to do something with the .each but am not very familiar with it.
This is an example of an attempt.
Note that in this case I used an id of go and I created a hidden tr with the id to_be_cloned and inserted it after row 1.
I need to be able to insert the row after any other row upon clicking that rows button. (if that makes any sense)

$("#go").click(function() { 
    $("#to_be_cloned").clone().show().attr('id','').insertAfter("#1");
})

Answer 1

Use a class to bind the event to the button instead of an id.
It is not valid if you have duplicate ID’s also, an ID can not start with a numeric value.

<table>
   <tr>
      <td><input type="button" class="insertButton" value="Go"/></td>
      <td>Hello World</td>
   </tr>
</table>


$(document).ready(function(){
   $('.insertButton').live('click', function(){
       var row = $(this).closest('tr').clone();
       $(this).closest('table').append(row);
   });
});

jsFiddle Example