Cloning table row to another and modify HTML

Question

I am creating a table which have many function but now i am trying to implement when user click on "Select as stop" it copy the row to second row which is implemented but now i am try to modify it when it copy when user press button "Select as stop" than copy to another table and modify the last row which is action . it modify to create two button and remove second button

Fiddle

JS

$(window).load(function() {
            var items = [];

            $(".addBtn").on("click", function() {
                var newTr = $(this).closest("tr").clone();
                items.push(newTr);
                newTr.appendTo($("#stopsTable"));

            });
        });


        $(window).load(function() {
            $("td:contains('Moving')")
                    .closest('tr')
                    .add(
                            $("td:contains('Depart')").closest('tr')
                            )
                    .add(
                            $("td:contains('Ignition_On')").closest('tr')
                            )
                    .add(
                            $("td:contains('Location')").closest('tr')
                            )
                    .add(
                            $("td:contains('Arrive')").closest('tr')
                            )
                    .hide();
        });

Answer 1

Do you means omething like: http://jsfiddle.net/qxqP9/2/

What I have done is keep your cloning script, removed everything from the last td (the button) and put in a place holder for your new button.

I have also added a placeholder for you to add any JS you need to to the new button :)

var newButtonHTML = "NEW BUTTON";    // This should be button HTML
$(newButtonHTML).children("button").click(function(e) {
    // type new button click code here if needed
});