How can update indexes in custom javascript function

[WikiGaga]

I create a javascript function where add new input filed based on select change . for example when page load the only show country list and when i select a country run javacript function where show city list but city indexes not change

     <div class="repeater">
            <div data-repeater-list="group-a">
                <div data-repeater-item>
                    <select class="country" name="country">
                        <option value="0">Select</option>
                        <option value="pakistan">Pakistan</option>
                        <option value="india">India</option>
                    </select>
                    <div id="city_data"></div>
                    <button data-repeater-delete type="button">Delete</button>
                </div>
            </div>
            <button data-repeater-create type="button">Add</button>
        </div>

<script>
    $('.repeater').repeater({
        show: function () {
            addCity();
        },
    });
    function addCity(){
        $('.country').on('change', function() {
            debugger
            var val = $(this).val();
            var city = '';
            if(val == 'pakistan'){
                city += '<select class="city" name="city">\n' +
                    '        <option>Islamabad</option>\n' +
                    '        option>Lahore</option>\n' +
                    '   </select>';
            }
            if(val == 'india'){
                city += 'City: <input type="text" class="city" name="city">';
            }
            $('#city_data').html(city);
        });
    }
</script>

how can change indexes