Как передать переменную внутри тега `<td>`?

Question

Я новичок в jQuery. Я просто хочу передать <select> с 20 опциями в <td> и затем добавить его в переменную с именем cols.

$(document).ready(function () {
    var counter = 1;
    $("#addrow").on("click", function () {
        if (counter < 16) {
            var newRow = $("<tr>");
            var cols = "";
            var selectList = "<select name="itemQuantity' + counter + '">";
            for (var x = 0; x < 20; x++) {
                selectList += "<option>" + x + "</option>";
            }
            selectList += "</select>";
            cols += '<td><input type="text" class="form-control" name="itemName' + counter + '"/></td>';
            cols += '<td>selectList</td>';
            cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
            newRow.append(cols);
            $("table.order-list").append(newRow);
            counter++;
        }
    });

    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();
        counter -= 1
    });

});

Я хочу, чтобы конечный результат мог точно генерировать строкикак это: https://i.imgur.com/9blXTlw.jpg каждый раз, когда я нажимаю «Добавить элемент». В настоящее время в строке есть какая-то ошибка: cols += '<td>selectList</td>' Вы видите логику того, чего я пытаюсь достичь. Как я могу правильно передать переменную selectList здесь?

Answer 1

Вам необходимо изменить следующие строки:

var selectList = "<select name="itemQuantity' + counter + '">";
cols += '<td>selectList</td>';

На

var selectList = "<select name='itemQuantity ' + counter + ' '>";
cols += '<td>' + selectList + '</td>';