How to call function JS for selected row only in table?-CodePudding

I'm trying to increment Quantity for second row only but the first row that increment and not the second ?!

this is my code Html of my table :

<table >
  <thead>
    <tr>
      <th >Item Name</th>
      <th >Item Price</th>
      <th >Quantité</th>
      <th >Actions</th>
    </tr>
  </thead>
  @foreach(var item in @Model.panierWebs) {

    <tbody>
      <tr >
        <td >
          <div >
            <img width="80" src="@Url.Content(item.Image)" alt="" />
            <a href="#!"> @Html.DisplayFor(modelItem => item.Model) </a>
          </div>
        </td>
        <td > @Html.DisplayFor(modelItem => item.Prix) DA</td>
        <td >
          <div >
            <input onclick="decrement(@item.Prix,@item.Qte)" type="button" value="-" ><input type="number" name="quantity" id="qte" value="@item.Qte" title="Qty"  pattern="" inputmode=""><input onclick="increment(@item.Prix,@item.Qte)"
              type="button" value=" " >
          </div>
        </td>
    
        <td >
          <a onclick="remove(@item.Id)"  href="#!">Remove</a>
        </td>
      </tr>
    
    </tbody>
  }
</table>

and my Script JS of increment and decrement Qte :

function decrement(prix, qte) {
  console.log("qte avant dec"   document.getElementById("qte").value);

  if (parseInt(document.getElementById("qte").value) != 1) {
    qte = parseInt(document.getElementById("qte").value) - 1; // increment qte
    console.log("qte apres dec"   qte);
    $("#qte").val(qte); // affecter la nouvelle valeur de qte
    var currenttotal = document.getElementById("total").value; // calculer le nouveau total
    var newtotal = parseFloat(currenttotal) - parseFloat(prix);
    $("#total").val(newtotal);
  }
}

function increment(prix, qte) {
  console.log("qte avant incr"   document.getElementById("qte").value);

  if (parseInt(document.getElementById("qte").value) <= 5) {
    qte = parseInt(document.getElementById("qte").value)   1; // increment qte
    console.log("qte apres incr"   qte);
    $("#qte").val(qte); // affecter la nouvelle valeur de qte
    var currenttotal = document.getElementById("total").value; // calculer le nouveau total
    var newtotal = parseFloat(currenttotal)   parseFloat(prix);
    $("#total").val(newtotal);
  }
}

CodePudding user response：

First, fix some problems:

You must avoid use duplicated identifiers in the DOM. You can use a class and work with classes instead of ids.
Also, you have tbody inside your foreach, making your table has lots of tbodys. You must put tbody tag outside the foreach

On approach to solve the problem is work with the concrete tag in which you call to your functions (the and - buttons). To do that, add a parameter "this" to your functions. "this" is the input button in which you do the click

<input onclick="decrement(this,@item.Prix,@item.Qte)" ...>
<input type="number" ...>
<input onclick="increment(this,@item.Prix,@item.Qte)" ...>

And modify a bit your functions:

function increment(input, prix, qte) {
   var number = $(input).closest("div").find("input[type=number]")
   var inputVal = parseInt(number.val());

   if (inputVal <= 5) {
       qte = inputVal   1; // increment qte
       console.log("qte apres incr"   qte);
       number.val(qte); // affecter la nouvelle valeur de qte               

       // ... your total part
   }
}

The $(input).closest("div") give you the div that contains your buttons and the textbox. In that div, you search an input of type=number (the textbox), get it's value and do the job