JSFiddle - React, Tailwind, and code Playground

by Kabir Hossain

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">
<table>
  <thead>
    <tr>
      <td>Type</td>
      <td>Garage</td>
      <td>Stock</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><select name="Type[]" class="select2 pd" style="width: 50%;">
          <option value="1">Garage1</option>
          <option value="2">Garage2</option>
          <option value="3">Garage3</option>
          <option value="4">Street parking4</option>
          <option value="5">Carport5</option>
        </select>
        <input type="hidden">
      </td>
      <td><select name="garage[]" class="select2 gd" style="width: 50%;">
          <option value="1">Garage1</option>
          <option value="2">Garage2</option>
          <option value="3">Garage3</option>
          <option value="4">Street parking4</option>
          <option value="5">Carport5</option>
        </select>
      </td>
      <td><input type="text" name="stock[]" class="stock">
      </td>
    </tr>
    <tr>
      <td><select name="Type[]" class="select2 pd" style="width: 50%;">
          <option value="1">Garage1</option>
          <option value="2">Garage2</option>
          <option value="3">Garage3</option>
          <option value="4">Street parking4</option>
          <option value="5">Carport5</option>
        </select>
        <input type="hidden">
      </td>
      <td><select name="garage[]" class="select2 gd" style="width: 50%;">
          <option value="1">Garage1</option>
          <option value="2">Garage2</option>
          <option value="3">Garage3</option>
          <option value="4">Street parking4</option>
          <option value="5">Carport5</option>
        </select>
      </td>
      <td><input type="text" name="stock[]" class="stock">
      </td>
    </tr>
    <tr>
      <td><select name="Type[]" class="select2 pd" style="width: 50%;">
          <option...

JavaScript

$(".select2").select2();
 $('table').on('click', '.stock', function(event){
        var parentTr = $(this).closest('tr');
        var type = $(parentTr).find('td:eq(0) select').val();
        var garage = $(parentTr).find('td:eq(1) select').val();

        var total = parseInt(type)+parseInt(garage);
        $(this).val(total);
    });

    $('#addMore').click(function(){
        var newElement = '<tr><td><select name="Type[]" class="select2 pd" style="width: 50%;"><option value="1">Garage1</option><option value="2">Garage2</option><option value="3">Garage3</option><option value="4">Street parking4</option><option value="5">Carport5</option></select><input type="hidden"></td><td><select name="garage[]" class="select2 gd" style="width: 50%;"><option value="1">Garage1</option><option value="2">Garage2</option><option value="3">Garage3</option><option value="4">Street parking4</option><option value="5">Carport5</option></select></td><td><input type="text" name="stock[]" class="stock"></td></tr>';

        $('table tbody').append(newElement)
    });