フォームのテキスト フィールドとラベルを動的に追加または削除する

ここで、フォーム テキスト フィールドを動的に追加するコードを見つけました。ただし、テキスト フィールドにラベルを追加する必要があり、新しいテキスト フィールドが追加されるたびに、ラベルの値も変更されます (たとえば、1 ずつ増分します)。ラベルを追加できましたが、主な問題は次のとおりです。1. 新しいフィールドとラベルが追加されるたびにラベルを 1 つずつ増やす方法 2. テキスト フィールドが削除されたときにラベルも削除できるようにする。私は Javascript を初めて使用するため、詳細な説明を歓迎します。

JavaScript コード:

    <script type="text/javascript">
    $(document).ready(function(){
        var maxField = 10; //Input fields increment limitation
        var addButton = $('.add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper
        var y = 2;
        var labelHTML = '<label for="inputEmail3" class="col-md-4 control-label">'+ $y + '</label>';
        var fieldHTML = '<div class="col-md-6"><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="remove-icon.png"/></a></div>'; //New input field html 
        var x = 1; //Initial field counter is 1
        $(addButton).click(function(){ //Once add button is clicked
            if(x < maxField){ //Check maximum number of input fields
                x++; //Increment field counter
                $(wrapper).append(labelHTML, fieldHTML); // Add field html
                y++;
            }
        });
        $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
            e.preventDefault();
            $(this).parent('div').remove(); //Remove field html
            x--; //Decrement field counter
        });
    });
    </script>

HTML コード:

    <fieldset>
        <legend>Question Options:</legend>
        <div class="field_wrapper form-group">
            <label for="inputEmail3" class="col-md-4 control-label">1</label>
            <div class="col-md-6">
                <input type="text" name="field_name[]" value=""/>
                <a href="javascript:void(0);" class="add_button" title="Add field"><img src="add-icon.png"/></a>
            </div>
        </div>
    </fieldset>