JavaScript不会获得递增的变量值，而是使用定义的值

Question

在这段代码中，我首先将jQuery与javascript一起使用，然后将房间变量定义为0。但是在add_fields函数中，我增加了room变​​量。 add_fields功能仅在用户单击按钮时有效。

但是在Jquery的keyup方法中，由于我在代码中定义了房间，所以总是将房间设为0。尽管单击按钮并运行add_fields函数后，房间变量增加了（我在函数中通过console.log(room)进行了检查），但是keyup方法仍然将其视为0。

请帮帮我。

var room = 0;

$('#room_fileds').on('keyup', '.item_name' + room + '', function() {
    var query = $(this).val();

    if (query != '') {
        var _token = $('input[name="_token"]').val();
        $.ajax({
            url: "{{ route('FoodItemController.fetchNameWhenType')}}",
            method: "POST",
            data: {
                query: query,
                _token: _token
            },
            success: function(data) {
                $('#name_list' + room + '').fadeIn();
                $('#name_list' + room + '').html(data);
            }
        })
    }
});

//set item-id when user selcts the item name from the dropdown list
$(document).on('click', '#list2', function() {
    $('.item_name' + room + '').val($(this).text());
    $('#name_list' + room + '').fadeOut();
});

function add_fields() {
    room++;

    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div class="form-row"><div class="form-group col"><label>Ingrediants</label><input type ="text" placeholder="Item" name="ingri[' + room + ']" class="form-control item_name' + room + ' "><div id="name_list' + room + '" style="z-index: 1;position:absolute;"></div>   </div><div class="form-group col"><label>Amounts</label><input type ="text" placeholder="Amounts" name="amount[' + room + ']" class="form-control"></div><div class="col form-group"><a type="button" id="clickR[' + room + ']" class="btn-floating cyan"><i class="fa fa-check" aria-hidden="true"></i></a><a type="button" id="clickX[' + room + ']" class="btn-floating cyan"><i class="fa fa-close" aria-hidden="true"></i></a></div></div>';
    objTo.appendChild(divtest);
    document.getElementById('length').value = room + 1;
    var hello = document.getElementById("length").value
}