Как вывести id товара в console.log при использовании кнопки добавить в корзину с помощью javascript?

Это моя html-кнопка для добавления в корзину, а ниже - код JavaScript, который я использую для отображения идентификатора itemdetails в консоли браузера google chrome.

 {% for detail in tonerdetails %}

      <tr>
          <td>{{detail.toner_model.toner_model}}</td>

          <td>{{detail.issued_to.name}}</td>
          <td>{{detail.employee_name}}</td>
          <td>{{detail.employee_designation}}</td>
          <td>{{detail.status}}</td>
          <td><a href="{% url 'print_toner_issue_vouchers' detail.id %}" target="_blank" rel="noopener noreferrer" class="btn btn-info">Print Issue Voucher</a>
              <a href="{% url 'print_toner_sent_invoice' detail.id %}" target="_blank" rel="noopener noreferrer" class="btn btn-info">Print Invoice</a>

              <a data-detail="{{detail.id}}" data-action="add" class="btn btn-outline-secondary addtocart">Add to Cart</a>
              <a href="{% url 'edit_tonerdetails_form' detail.id %}" class="btn btn-warning">Edit</a>
              <a data-toggle="modal" data-target="#delete-modal{{ toner.pk }}" class="btn btn-danger">Delete</a></td>
      </tr>


let butns=document.getElementsByClassName('addtocart')
for (btn of butns){
    btn.addEventListener('click', function(){
        let detailid=this.dataset.detail
        let action=this.dataset.action
        console.log(detailid)
    })
}

В вашем JavaScript была опечатка, вы слушали событие на массиве butns, а не на каждом элементе этого массива, поэтому я изменил его на btn.addEventListener, а должно быть 

let action=this.dataset.action

вместо

let action=this.dataser.action

Here is working example 

let butns=document.getElementsByClassName('addtocart')
for (let btn of butns){
    btn.addEventListener('click', function(){
        let detailid=this.dataset.detail
        let action=this.dataset.action
        console.log(detailid)
    })
}
<table>
<tr>
<a data-detail="1" data-action="add" class="btn btn-outline-secondary addtocart">
Add to Cart - 1
</a>
</tr><br>
<tr>
<a data-detail="2" data-action="add" class="btn btn-outline-secondary addtocart">
Add to Cart - 2
</a>
</tr><br>
<tr>
<a data-detail="3" data-action="add" class="btn btn-outline-secondary addtocart">
Add to Cart - 3
</a>
</tr>
</table>

Вернуться на верх