How to make a click function in javascript loop through all records instead of just the first record

I have a feeling this problem I've having trouble with is pretty simple but I am new to all this and don't know all the ins and outs of html, javascript, etc. yet. The javascript functions is what's really difficult to learn for me. Anyways, I have an item cart where the users add whatever products they want to order. I'm trying to implement a function where when the user clicks the "Proceed To Checkout" button it checks to make sure whatever qty they are ordering does not exceed the amount we have in stock. If it does then display an alert message. I have a function working perfectly at the moment, but it is only checking the first record and not looping through anything. Any thoughts or insight on what I can do would be greatly appreciated. Here is my code:

   @foreach (var item in (List<Item>)Session["cart"])
    {
        <tr>
          <td>
            @item.Pr.Product_Code
          </td>
          <td>
            @item.Pr.Description<br />
            <span class="text-left" id="errmsg"></span>
          </td>
          <td>
            <img src="~/Images/@item.Pr.ImageUrl" width="100" height="80" />
          </td>
          <td>
            <input type="text" value="@item.Qty" id="quantity" name="quantity" class="amtOrdered" /><br />
            <input type="text" value="@item.Pr.Qty_Available" id="qty-avbl" name="qty-avbl" class="amt-avbl" hidden />
          </td>
          <td class="btn-sctn">
            <button class="button">
               <i class="fa solid fa-trash-o"></i>
               @Html.ActionLink("Remove", "Delete", "ItemCart", new { id = item.Pr.ProductID },
                           new { onclick = "return confirm ('Are you sure you want to delete this item?');", @class = "remove" })
            </button>
            </td>
            <td></td>
         </tr>
      }
    </table>
         <div></div>
         <hr />
         <p class="place-order">
            <input type="submit" class="checkout" value="Proceed To Checkout" id="checkQty" />
         </p>
         <p class="keep-shop">
            @Html.ActionLink("Continue Shopping", "ProductCatalog", "Products", "", new { @class = "shopping-link" })
         </p>
      }@*End of form*@
    }@*End of if session*@

and my function I have for this is:

<script type="text/javascript">
    $(document).ready(function () {
        $("#checkQty").click(function (event) {
            // Get the value of the input field with id
            let qty = document.getElementById("quantity").value;
            let avbl = document.getElementById("qty-avbl").value;
            let text;
                if (qty > avbl) {
                    event.preventDefault();
                    text = "There is not enough stock to order this amount";
                    document.getElementById("errmsg").innerHTML = text;
                    return false;
                }
                else {
                    text = "";
                }           
        });
    });
</script>