Untitled

How Could i rearrange textboxes which are named as array index

var counter = 1;

function addrow() {

    var textbox = "<div id='rows" + counter + "'> </br><label>  Option :  </label><input type='text' name='Answers[" + counter + "]' class='ahsan required' /><a href="">Remove</a></div>";

    var form = $("#form").valid();

    if (form) {

        $("#TextBoxesGroup").append(textbox);

        counter++;

    }

    else {

        return false;

    }

}

       

<div id="TextBoxesGroup" style="margin-left: 100px;">

    <div id="rows0">

        </br><label>

            Option :

        </label>

        <input type='text' name='Answers[0]' class='ahsan required' /><a href="">Remove</a>

     </div>

</div>

<div>

    <input type="button" value="Add another row" onclick="addrow();" class="qa-adbtn" id='addButton' /></div>

       

$(function(){

    $("#form").validate();

     this.addrow = function() {

        if ($("#form").valid()) {

            var textbox = "<div> </br><label>  Option :  </label><input type='text' name='Answers["+$("#TextBoxesGroup div").length+"]' class='ahsan required' /><a class='remove-me' href='#'>Remove</a></div>";

            $("#TextBoxesGroup").append(textbox);

            $('.remove-me').click(function(){

                $(this).parent().remove();

                return false;

            });

        }

        else {

            return false;

        }

    }

    this.addrow();

});

       

<form id="form">

<div id="TextBoxesGroup" style="margin-left: 100px;"></div>

<div>

    <input type="button" value="Add another row" onclick="addrow();" class="qa-adbtn" id='addButton' />

</div>

</form>