JSFiddle - React, Tailwind, and code Playground

HTML

<table id="product">
  <tr data-price="700" data-count="2">
    <td>Apple iPhone</td>
    <td>700</td>
    <td>
      <button class="count-control" data-method="remove">-</button>
      <span class="count-value">1</span>
      <button class="count-control" data-method="add">+</button>
    </td>
    <td class="price-value"></td>
  </tr>
  <tr data-price="450" data-count="1">
    <td>Apple iPad</td>
    <td>450</td>
    <td>
      <button class="count-control" data-method="remove">-</button>
      <span class="count-value">1</span>
      <button class="count-control" data-method="add">+</button>
    </td>
    <td class="price-value"></td>
  </tr>
  <tr data-price="200" data-count="3">
    <td>Apple iPod</td>
    <td>200</td>
    <td>
      <button class="count-control" data-method="remove">-</button>
      <span class="count-value">1</span>
      <button class="count-control" data-method="add">+</button>
    </td>
    <td class="price-value"></td>
  </tr>
  <tr data-price="712" data-count="1">
    <td>Samsung Galaxy</td>
    <td>712</td>
    <td>
      <button class="count-control" data-method="remove">-</button>
      <span class="count-value">1</span>
      <button class="count-control" data-method="add">+</button>
    </td>
    <td class="price-value"></td>
  </tr>
  <tr data-price="21" data-count="1">
    <td>Nokia 2314</td>
    <td>21</td>
    <td>
      <button class="count-control" data-method="remove">-</button>
      <span class="count-value">1</span>
      <button class="count-control" data-method="add">+</button>
    </td>
    <td class="price-value"></td>
  </tr>
</table>

CSS

table {
  border: 1px solid #ddd;
  border-collapse: collapse;
}
td {
  border: 1px solid #ddd;
  padding: 5px;
}

JavaScript

var $productTable = $('#product');

$productTable.on('update', function(){
	$(this).find('tr').each(function(i, row){
  	var $row = $(row);
    var price = parseFloat($row.data('price'));
    var count = parseInt($row.data('count')) || 1;
    
    $row.find('.count-value').text(count);
    $row.find('.price-value').text(price * count);
  });
});

$productTable.delegate('.count-control', 'click', function(){
	var $this = $(this);
  var $row =  $this.parents('tr');
  
  var method = $this.data('method');
  var count = parseInt($row.data('count')) || 1;
  
  switch(method) {
  	case 'remove':
    	if(count == 1) {
      	return;
      }
      
      --count;
    break;
    case 'add':
    	++count;
    break;
  }
  
  $row.data('count', count);
  $productTable.trigger('update');
});

$productTable.trigger('update');