Add/Remove Option For Multiple Input Fields In Form

I am using a form with the option of Add more city to enter more than one city name. There is a button t0 remove the fields also. It is working perfect but the problem is in below

Solution 1:

Modify your JavaScript like;

<script type="text/javascript">
    <!--
    var counter = 0;

    function init() {
        document.getElementById('moreFields').onclick = moreFields;
        moreFields();
    }

    function moreFields() {
        counter++;
        var newFields = document.getElementById('readroot').cloneNode(true);
        newFields.id = '';
        newFields.style.display = 'block';
        var newField = newFields.childNodes;
        for (var i=1;i<newField.length;i++) {
            var theName = newField[i].name
            if (theName)
                newField[i].name = theName + counter;
        }
        var insertHere = document.getElementById('writeroot');
        insertHere.parentNode.insertBefore(newFields,insertHere);
    }

    // -->
    </script>