JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<table>
<tr>
   <td class="product">
     Milk
   </td>
   <td>
     <select class='qty'>
        <option value="hello">1</option>
        <option value="howareyou">2</option>
     </select>
   </td>
</tr>
<tr>
   <td class="product">
     Butter
   </td>
   <td>
     <select class='qty'>
        <option value="adada">1</option>
        <option value="two">2</option>
     </select>
   </td>
</tr>
<tr>
   <td class="product">
     Super Good
   </td>
   <td>
     <select class='qty'>
        <option value="hiii">1</option>
        <option value="dumdumdum">2</option>
     </select>
   </td>
</tr>
</table>

JavaScript

var qtyEles = document.querySelectorAll('.qty');
qtyEles.forEach(function(select){
	select.addEventListener('change', handle)
});

function handle(){
	var row = this.parentNode.parentNode;
  var productName = row.querySelector('.product').innerText;
  console.log("Name: " + productName, "Qty: " + this.value);
}