Add multiple records to database on Button Click in ASP.Net MVC

Prevent page refresh on Submit Button click in ASP.Net MVC

I add the id and quantity to the table with the add button under the products in the picture in the link.

It always adds the ID number of the first product to the table.

How can I solve this? Thank you.

<div class="w3-half w3-container">
    @foreach (var ch in Model.STOKLAR1_Results)
    {
        <img src="@ch.RESIMYOL" style="width: 100%; height: 210px">
        <P style="background-color: red; color: #FFF; font-size: 18px; width: 100%;">@ch.STOKADI</P>
        <h6 style="color: green;">@ch.FIYAT</h6>
        <p style=" font-size: 11px">@ch.ACIKLAMA</p>
        <label>ID</label>
        <input type="text" name="STOKID" id="txtstok" value="@ch.ID" />
        <input type="text" name="MASAID" id="txtmasa" value="@ViewBag.masaid" hidden />
        <input type="text" name="FIRMAKODU" id="txtfirma" value="@ViewBag.firma" hidden />
        <label>amount</label>
        <input type="number" name="MIKTAR" id="txtmiktar" value="1" style="width:55px" />
    
        <button class="btn btn-success" id="spt">add</button>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
        <script type="text/javascript">
            $("body").on("click", "#spt", function () {
                var g = {};
                g.STOKID = $("#txtstok").val();
                g.MASAID = $("#txtmasa").val();
                g.FIRMAKODU = $("#txtfirma").val();
                g.MIKTAR = $("#txtmiktar").val();
                $.ajax({
                    type: "POST",
                    url: "/AnaMenu/StokEkle/@ViewBag.firma/@ViewBag.masaid",
                    data: JSON.stringify(g),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        alert("Sepete Eklendi");
                    }
                });
            });
        </script>
    }
</div>
<div class="w3-half w3-container">
    @foreach (var ch in Model.STOKLAR2_Results)
    {
        <img src="@ch.RESIMYOL" style="width: 100%; height: 210px">
        <P style="background-color: seagreen; color: #FFF; font-size: 18px; width: 100%;">@ch.STOKADI</P>
        <h6 style="color: green;">@ch.FIYAT</h6>
        <h6 style="color: red;">@ch.ACIKLAMA</h6>
        <label>ID</label>
        <input type="text" name="STOKID" id="stk" value="@ch.ID" />
        <input type="text" name="MASAID" id="msid" value="@ViewBag.masaid" hidden />
        <input type="text" name="FIRMAKODU" id="frmkd" value="@ViewBag.firma" hidden />
        <label>amount</label>
        <input type="number" name="MIKTAR" id="mktr" value="1" style="width:55px" />
        <button class="btn btn-success" id="sptekle">add</button>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
        <script type="text/javascript">
            $("body").on("click", "#sptekle", function () {
                var g = {};
                g.STOKID = $("#stk").val();
                g.MASAID = $("#msid").val();
                g.FIRMAKODU = $("#frmkd").val();
                g.MIKTAR = $("#mktr").val();
                $.ajax({
                    type: "POST",
                    url: "/AnaMenu/StokEkle",
                    data: JSON.stringify(g),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        alert("Sepete Eklendi");
                    }
                });
            });
        </script>
    }
</div>