javascript - jquery datatable with Increment and decrement input

Question

sample image:

Hi, I am doing increment and decrement in jquery datatables. each row have +/- button on quantity column. I can increase/decrease the value but only on first row. When I click +/- on different rows, it still affect only the first row.

datatable:

                        {
                            "ajax": {
                                "url": '@Url.Content("~/Home/GetList")',
                                "type": "GET",
                                "datatype": "json"
                            },
                            "columns": [
                                { "data": "ItmID" },
                                { "data": "ItmDesc" },
                                { "data": "PackSize" },
                                { "data": "RecommCtnQty" },
                                {
                                    "data": "ItmID", "render": function (data, row) {
                                        return "</input><a class='btn btn-danger btn-sm' style='font-size:0.7rem;' onClick='decNumber()')><i class='fa fa-pencil'></i> -</a>";
                                    },
                                    "orderable": false,
                                    "searchable": false
                                },
                                {
                                    "data": "ActualCtnQty",
                                    render: function (data, type, row) {
                                        return "<input class='input-group-text' id='qtyTextbox' type='text' style='font-size:0.7rem;width:100px;' value= " + row.ActualCtnQty + ">"
                                        
                                    }
                                },
                                {
                                    "data": "ItmID", "render": function (data) {
                                        return "</input><a class='btn btn-danger btn-sm' id='incbutton' style='font-size:0.7rem;' onClick='incNumber()')><i class='fa fa-pencil'></i> +</a>";
                                        
                                    },
                                    "orderable": false,
                                    "searchable": false
                                },
                                { "data": "SOHQty" },
                                { "data": "OnOrderQty" },
                                { "data": "AveDailyForecastSalesQty", render: $.fn.dataTable.render.number(',', '.', 2, '') },
                                { "data": "DaysCover" },
                                { "data": "MinQty" },
                                { "data": "OnPromo" }```

   //  Increase number in text box by 1
        function incNumber() {
            
                    var c = parseInt(document.getElementById("qtyTextbox").value);
                    c++;
                    document.getElementById("qtyTextbox").value = c;
                }

               // Decrease number in text box by 1
        function decNumber() {

            var c = parseInt(document.getElementById("qtyTextbox").value);

                    if (c != 0) {
                    c--;
                    document.getElementById("qtyTextbox").value = c;
                    }
            }

Answer 1

You have multiple Textboxes with same ID. You will have to use Class Selector instead.

HTML

<div class="container">
  <div class="row">
      <input type="text" class="myTextBoxes"/>
      <input type="button" value="Submit" class="myButtons" />
  </div>
  <br />
  <div class="row">
      <input type="text" class="myTextBoxes"/>
      <input type="button" value="Submit" class="myButtons" />
  </div>
  <br />
  <div class="row">
      <input type="text" class="myTextBoxes"/>
      <input type="button" value="Submit" class="myButtons" />
  </div>
</div>

Jquery

$(document).ready(function () {

  $('.myButtons').click(function () {

      // get index of button clicked first and then find the textbox by index
      var clickedButtonIndex = $('.myButtons').index(this);
      var selectedTextBox = $('.myTextBoxes').eq(clickedButtonIndex).val();
      selectedTextBox++;
      alert(selectedTextBox);
  });
});