Заблокировать элемент button JQuery

[BorisJe]

Всем привет. По клику на кнопку все остальные кнопки в таблице button[name="Product"] должны быть заблокированы.

$(document).ready(function () {
        $('#changeBack').click(function () {
            $.ajax({
                type: 'GET',
                url: '/user/GetChange',
                success: function (result) {
                    var count = 0;
                    //var s = 'Id: ' + result.id;
                    var s = 'Спасибо за покупкку';
                    s += '<table class="table">' + '<tr><td>Ваша сдача: <td><tr>';

                    $.each(result.$values, function (index, value) {
                        s += '<tr style="border-bottom: 1px solid #000;"><td> Количество монет: ' + value.quantity + ' монет по ' + value.id + '<td><tr>';
                        count++;
                    });
                    s + '</table>';
                    $('#result3').html(s);

                    var summ = $('#total').val(0);
                    //test
                    document.querySelectorAll('.table td.price')
                        .forEach(td => {
                            const price = parseFloat(td.dataset.price);
                            const bt = td.closest('tr').querySelector('button[name="Product"]');
                            bt.disabled = false;
                        });
                    $('.table td').each(function() {
                        console.log($(this).html());
                        
                    });
                    //test
                    console.log(summ);
                }
            });
        });
    });

Вот Мой Js.

Кнопки создаются так:

@foreach (var item in Model)
                    {
                        pirce = item.Quantity > 0 ? "price" : "priceOutOfStock";
                        <tr id=pirceTr>
                            <input type="hidden" name="id" value=@item.Id />
                            @*<td><input asp-for="@item.Name" value="@item.Id" name="Product" type="radio" disabled="true"></td>*@
                            <br />
                            <td>@item.Name</td>
                            <td class=@pirce data-price=@item.Price name="price" id="price" value=@item.Price>@item.Price</td>
                            <td style="width: 10%">
                                <button name="Product" type="submit" value="@item.Id" disabled="true"><img class="center" srcset="~/images/@item.TitleImagePath" src="@Url.Action("Purchase", "User", new {item.Id})" style="width: 128px; height: 96px; vertical-align: bottom"></button>
                            </td>
                            <td>@item.Description</td>
                            <td id="quantity" class="quantity" data-quantity=@item.Quantity name="quantity">@item.Quantity</td>
                        </tr>
                    }
                </table>

[voraa]

const bts = document.querySelectorAll('button[name="Product"]')
bts.forEach ( bt => {
   bt.addEventLisenter('click', ev => {
       bts.forEach (b => b.disabled = b !== bt)
   })
})

[BorisJe]

const bts = document.querySelectorAll('button[name="Product"]')
bts.forEach ( bt => {
   bt.addEventLisenter('click', ev => {
       bts.forEach (b => b.disabled = b !== bt)
   })
})

Выдает ошибку.

Uncaught TypeError: bt.addEventLisenter is not a function

<div class="col-md-4 col-md-offset-4">
            <fieldset>
                <legend>Сдача</legend>
                <form asp-action="GetChange" asp-controller="User"
                      method="post" enctype="multipart/form-data">
                    <input class="btn btn-info" type="button" value="Сдача" id="changeBack" />
                    <br />
                    <span id="result3"></span>
                </form>
            </fieldset>
        </div>

Вот кнопка. По ее нажатию Я вызываю ajax

$(document).ready(function () {
        $('#changeBack').click(function () {
            $.ajax({
                type: 'GET',
                url: '/user/GetChange',
                success: function (result) {
                    var count = 0;
                    //var s = 'Id: ' + result.id;
                    var s = 'Спасибо за покупкку';
                    s += '<table class="table">' + '<tr><td>Ваша сдача: <td><tr>';

                    $.each(result.$values, function (index, value) {
                        s += '<tr style="border-bottom: 1px solid #000;"><td> Количество монет: ' + value.quantity + ' монет по ' + value.id + '<td><tr>';
                        count++;
                    });
                    s + '</table>';
                    $('#result3').html(s);

                    var summ = $('#total').val(0);
                    //test
                    const bts = document.querySelectorAll('button[name="Product"]');
                    bts.forEach ( bt => {
                        bt.addEventLisenter('click', ev => {
                            bts.forEach (b => b.disabled = b !== bt);
                        });
                    });

                    //test
                    console.log(summ);
                }
            });
        });
    });

Обнуляю сумму, и в итоге человек забрал сдачу и осталось на счете 0.
Все

<td style="width: 10%">
   <button name="Product" type="submit" value="@item.Id" disabled="true"><img class="center" srcset="~/images/@item.TitleImagePath" src="@Url.Action("Purchase", "User", new {item.Id})" style="width: 128px; height: 96px; vertical-align: bottom"></button>
</td>

Должны быть снова заблокированы

[voraa]

Ну очепятался.
Могли бы и сами поправить

Только я сразу не понял. Думал, что на нажатие на одну из кнопок name="Product, остальные должны заблокироваться.

Тогда еще проще

document.querySelectorAll('button[name="Product"]').forEach (b => b.disabled = true)

[BorisJe]

document.querySelectorAll('button[name="Product"]').forEach (b => b.disabled = true)

Спасибо