Changing value on click HTML

Question

I'm trying to increment a per product quantity value in my table by clicking a button. I got an Add button at the end of each product in my table so If I want to increment the first quantity value of the first product, I'm just gonna click the first button at the first line. If I want to increment the second product's quantity, I will simply click the button at the second line and so on..

Here is the table in my HTML file(Ignore the remove button):

    <tbody>
      {%for stock in stocks%}
      <tr>
        <th scope="row">{{stock.stockId}}</th>
        <td>{{stock.name}}</td>
        <td>{{store.name}}</td>
        <td class="mystore-quantity">{{stock.quantity}}</td>
        <td>
          <button
            type="button"
            data-action="add"
            data-product="{{stock.id}}"
            class="btn btn-primary ml-2 mb-1 action-btn"
          >
            Add
          </button>
          <button
            type="button"
            data-product="{{stock.id}}"
            class="btn btn-danger ml-2 mb-1 action-btn"
            data-action="remove"
          >
            Sell
          </button>
        </td>
      </tr>
      {%endfor%}
    </tbody>
  </table>

and this is the JS file (Ignore the updateStock call):

const actionBtns = document.getElementsByClassName('action-btn');
const quantity = document.getElementsByClassName('mystore-quantity');
console.log(quantity[0])
for (let i = 0; i < actionBtns.length; i++)
{
    actionBtns[i].addEventListener('click', function(){
      
        const productId = this.dataset.product;
        const action = this.dataset.action;
        console.log('productId:', productId, 'Action:', action )
        if(user == 'AnonymousUser'){
            console.log('User not logged in')
        } else {
            console.log(quantity.textContent)


            updateStock(productId,action)
 
        }
    })


}

Answer 1

You can use this key word to target the clicked button and use closest() to target the parent tr. From that tr element you can get the respective td element using querySelector().

Demo:

const actionBtns = document.getElementsByClassName('action-btn');
//const quantity = document.getElementsByClassName('mystore-quantity');
//console.log(quantity[0])
for (let i = 0; i < actionBtns.length; i++){
  actionBtns[i].addEventListener('click', function(){
    const el = this.closest('tr').querySelector('.mystore-quantity');
    el.textContent = Number(el.textContent) + 1;
  });
}

<table>
<tbody>
      <tr>
        <th scope="row">11</th>
        <td>abc</td>
        <td>xyz</td>
        <td class="mystore-quantity">1</td>
        <td>
          <button
            type="button"
            data-action="add"
            data-product="{{stock.id}}"
            class="btn btn-primary ml-2 mb-1 action-btn"
          >
            Add
          </button>
          <button
            type="button"
            data-product="{{stock.id}}"
            class="btn btn-danger ml-2 mb-1 action-btn"
            data-action="remove"
          >
            Sell
          </button>
        </td>
      </tr>
      <tr>
        <th scope="row">22</th>
        <td>mnl</td>
        <td>asd</td>
        <td class="mystore-quantity">2</td>
        <td>
          <button
            type="button"
            data-action="add"
            data-product="{{stock.id}}"
            class="btn btn-primary ml-2 mb-1 action-btn"
          >
            Add
          </button>
          <button
            type="button"
            data-product="{{stock.id}}"
            class="btn btn-danger ml-2 mb-1 action-btn"
            data-action="remove"
          >
            Sell
          </button>
        </td>
      </tr>
    </tbody>
  </table>