Question

I have a table that looks like this:

I have this same chart on a few pages hard coded.

I want to be able to change the tables on all the pages using js and jQuery

I want to make it so that the YTD button is next to the From Date input
and the MTD is next to the To Date input.

I have tried to do that here:
http://jsfiddle.net/maniator/W9YFF/9/

But it seems that it gets messed up at some points.

How do I fix that?

---

UPDATE

If I try doing

$('input[type="button"][value="YTD"]').insertAfter($('#fdate'));
$('input[type="button"][value="MTD"]').insertAfter($('#tdate'));

My result looks like this:

Answer 1

Did I misunderstand something crucial here, or just do this?

$('input[type="button"][value="YTD"]').insertAfter($('#fdate'));
$('input[type="button"][value="MTD"]').insertAfter($('#tdate'));

example: http://jsfiddle.net/niklasvh/TghZ3/

edit

If you want to edit the table structure instead, you could do this:

$(".main tr:not(:first):not(:last)").append($('<td />'));
$(".main tr:first th, .main tr:last td").attr('colspan',3);


$(".main tr:lt(2) td:last").append($('.YTD'));
$(".main tr:lt(3) td:last").append($('.MTD'));

example: http://jsfiddle.net/niklasvh/TghZ3/41/

edit 2

If you just want to add new cells to those 2 rows and colspan the rest:

$(".main td:last-child:not(.first)").attr('colspan',function(i,a){
    if (typeof a == "undefined") a = 1;
    return (parseInt(a)+1);
});

$(".main tr:first th, .main tr:last td").attr('colspan',3);


$(".main tr:lt(2) td:last").attr('colspan','').after($('<td />').append($('.YTD')));

$(".main tr:lt(3) td:last").attr('colspan','').after($('<td />').append($('.MTD')));

example: http://jsfiddle.net/niklasvh/TghZ3/57/