JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tbl">
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Action</th>
  </tr>
  <tr>
    <td class="product-name"></td>
    <td class="product-price"></td>
    <td><button class="btn-edit">edit</button></td>
  </tr>
  <tr>
    <td class="product-name">Apple</td>
    <td class="product-price">10</td>
    <td><button class="btn-edit">edit</button></td>
  </tr>
  <tr>
    <td class="product-name">Banana</td>
    <td class="product-price"></td>
    <td><button class="btn-edit">edit</button></td>
  </tr>
</table>

CSS

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 50%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  vertical-align: bottom;
  padding: 8px;
}

input[name^='product']{
  background-color: red;
}

JavaScript

$('#tbl').on('click', '.btn-edit', (event) => onBtnClick(event));

function onBtnClick(event){
	const $target = $(event.target);
  const $product = $target.closest('tr').find('.product-name');
  const $price = $target.closest('tr').find('.product-price');
  
  $product.append(`<input name='product-name' type='text'>`);
  $price.append(`<input name='product-price' type='text'>`);
}