Add new row in GridView using JavaScript/JQuery

While creating Visual web part, I have a task to add a new row in the gridview that contains one Textbox inbuild\t with jquery datepicker,one dropdown and one single line text box.
Also my gridview contains footer to add some buttons and pagination.

After googling, I found a solution from here :
<script type="text/javascript">

function AddNewRecord()
        {
            var grd = document.getElementById('GridView1');
            var tbod=grd.rows[0].parentNode;
            var newRow=grd.rows[grd.rows.length - 1].cloneNode(true);
            tbod.appendChild(newRow);
            return false;

        }


</script>

But, Its cloning footer row and adding new row in footer.
Then I have done some modifications in the code as follows:

<script type="text/javascript">

function AddNewRecord()
        {
            var grd = document.getElementById('GridView1');
            var tbod=grd.rows[0].parentNode;
            var lastLI = tbod.lastChild
            var newRow=grd.rows[lastLI.rowIndex-1].cloneNode(true);
            tbod.insertBefore(newRow, lastLI);
            return false;

        }


</script>

Now its cloning 1st header row and adding as last header row.