Placement issues in adding input rows dynamically using jQuery - php

Question

Here is the script to add dynamic rows. It works completely fine with only one error. When I click on Add link, it adds the new row. However, the initial row (only select input tag) comes below, and the new row while other remains at there only :(
Please see the HTML code, also below.
Please see this image for more description:
<script type="text/javascript" src="http://cachefile.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js"></script>
<script type="text/javascript">
$(function(){ var newRowNum = 0;
$('#addnew').click(function(){
newRowNum += 1;
var addRow = $(this).parent().parent();
var newRow = addRow.clone();
$('input', addRow).val('');
$('td:first-child', newRow).html(newRowNum);
$(':input', newRow).each(function(i){
var newID = newRowNum + '_' + i;
$(this).attr('id',newID).attr('name',newID);
});
addRow.before(newRow);
$('a.remove', newRow).click(function(){
$(this).parent().parent().remove();
newRowNum -= 1;
return false;
});
$('#go').click(function(){
var numRows=$('#tabdata tbody tr').length;
$('#myHiddenInput').val(numRows);
});
return false; }); });
</script>
Here is the HTML part
<form action="issue-item.php" method="POST">
<fieldset style="width: 1714px;">
<legend style="font-family: fantasy; font-style: !important; color: teal; font-size:30px ;">Issue</legend><br /><br />
<table id="tabdata" align="left" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<td>S.No.</td>
<td align="center">Date</td>
<td align="center">Name of Person</td>
<td align="center">Name Of Item</td>
<td align="center">Quantity</td>
<td align="center">Purpose</td>
</tr>
</thead>
<tbody>
<tr>
<td><a id="addnew" href="">Add</a></td>
<td><input type="text" name="0_0" style="width: 120px;"/></td>
<td><input type="text" name="0_1" style="width: 170px;"/></td>
<td>
<select name="0_2" size="1">
<option>Choose item</option>
<?php
require('blogic.php');
$obj = new blogic();
$result = $obj->select("select id,name_item from store_item");
$count=$obj->select("SELECT COUNT(*) FROM store_item");
$obj->rows = mysql_num_rows($count);
while($objres = mysql_fetch_row($result))
{
$str=<<<here
<option value="$objres[0]">$objres[1]</option>
here;
echo $str;
}
?>
</select>
</td>
<td><input type="text" name="0_3" style="width: 80px;"/></td>
<td><input type="text" name="0_4" style="width: 280px;"/></td>
</tr>
<tr>
<td>
<input type="hidden" id="myHiddenInput" name="myHiddenInput" value="1"/>
</td>
</tr>
<tr><td><input id="go" name="go" type="submit" /></td></tr>
</tbody>
</table>
</fieldset>
</form>

Answer 1

Add following lines after $('input', addRow).val('');:
$('select', newRow).val($('select', addRow).val());
$('select', addRow).val('');
Also see my example.
=== UPDATE ===
Or replace $('input', addRow).val(''); with:
$('select', newRow).val($('select', addRow).val());
$(':input', addRow).val('');
Also see my updated example.