add dynamic element into array
<pre><code> var x = 0;
    var counter = 0 ;

    $(function () {
        $('#addBtn').click(function () {

                        x++;

                       if (counter &lt; 5) {
                counter++;
                $('#content').append('&lt;input type="text" id="mytxt' + x + '"&gt;');
                $('#content').append('&lt;input type="button" id="removeBtn' + x + '" value="Remove" onclick="removeRow(' + x + ')" /&gt;');
                $('#content').append('&lt;div id="br' + x + '"/&gt;&lt;/div&gt;');



            } else {
                alert("you cannot added more than 5 element");
            }


        }
        );



    });




    function removeRow(index) {
        $('#mytxt' + index).remove();
        $('#removeBtn' + index).remove();
        $('#br' + index).remove();
        counter--;
           alert(counter);

    }
</code></pre>

<p>this is my function to create dynamic button, when i clicked "addBtn", new element will be created and id start with 1,eg: mytxt1, and when i clicked "removeBtn" and "addBtn" again,the id will become mytxt2, the result is out of my expected, 
what i want is when i clicked "removeBtn" and "addBtn" ,the id will start from 1 again,but not 2</p>

<p>new updated</p>

<p>that is one of my question also, if i added more element let said 4 element,the id i get will be mytxt1,mytxt2,mytxt3 and mytxt4, and if i remove mytxt2, the next element i added will become mytxt1,mytxt3,mytxt4,and mytxt5, and this is not what i want,what i want is mytxt1,mytxt2,mytxt3 and mytxt4</p>
