Change multiple div order with jQuery

hi
i have this html code

<table>
<tr><td><div id="one_1">Operation System</div><div id="two_1">Embedded Linux</div></td></tr>
<tr><td><div id="one_2">Video</div><div id="two_2">16CH. Analog: BNC connector via DVI cable, IP: Support up to 4CH</div></td></tr>
<tr><td><div id="one_3">Video outputs</div><div id="two_3">1x BNC spot monitor outputs,1xTV output, 1x VGA output</div></td></tr>
etc...
</table>

Code (markup):

i want to place the "two" divs before the "one" divs.

i have tried with this

$("#two_1").insertBefore("#one_1");

Code (markup):

but how i can do it for multiple rows? (the table rows are generated from PHP, so the table rows are not constant)

thanks in advance

 

You can't give the same id to multiple elements. Once you correct that problem you won't have a problem.

 

I'm not giving the same id to multiple elements. It si one_1, one_2, one_3 etc... and two_1, two_2, two_3 etc...
What can i do with javascript? i have done something like that:

$("#two_1").insertBefore("#one_1");
$("#two_2").insertBefore("#one_2");
$("#two_2").insertBefore("#one_2");

Code (markup):

how i can do it with less javascript code?

 

You could remove the id's and instead use classes.

<table>
<tr><td><div class="one">Operation System</div><div class="two">Embedded Linux</div></td></tr>
<tr><td><div class="one">Video</div><div class="two">16CH. Analog: BNC connector via DVI cable, IP: Support up to 4CH</div></td></tr>
<tr><td><div class="one">Video outputs</div><div class="two">1x BNC spot monitor outputs,1xTV output, 1x VGA output</div></td></tr>
etc...
</table>

Code (markup):

Then this should work

$(".two").insertBefore(".one");

Code (markup):