JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<script id="template">
<tr class="Parameters" id="AA">
  <td>
    <input type="text" class="parameters" name="TypeOfOut" />
  </td>
  <td>
    <select class="unit ee105" type="text" value=" " name="Unit" onchange="changeUnit(this.value)">
      <option value="2">KM</option>
      <option value="4">euro</option>
      <option value="3">$</option>
      <option value="25">WorkHour</option>
      <option value="3">dollar</option>
      <option value="25">WorkHour</option>
    </select>
  </td>
  <td>
    <input class="cost" type="number" value=""  name="Cost">
  </td>
  <td>
    <input class="amount ee105" type="number" value="" name="Amount">
  </td>
  <td><span class="minisum" name="minisum"></span></td>
  <td class="system">
    <input type="hidden" class="ParameterID" name="ParameterID' + counter +'" />
  </td>
  <td class="system">
    <input type="hidden" class="ProjectID" name="ProjectID" value="3" />
  </td>
  <td>
    <input type="submit" value="Submit">
  </td>
</tr>
</script>

<form action="ProjectParameterNewRecord.php" method="post">
  <table class="Parameter" id="new">
    <tr>
      <td>
        <input type="text" class="parameters" name="TypeOfOut" />
      </td>
      <td>
        <?php include "ExchangeRates.php"?>
      </td>
      <td>
        <input type="number" value="" class="ee105 cost" name="Cost" onchange="changeCost()">
      </td>
      <td>
        <input type="number" value="" class="amount ee105" name="Amount">
      </td>
      <td><span name="minisum" class="minisum"></span>
      </td>
      <td class="system">
        <input type="hidden" class="ParameterID" name="ParameterID" />
      </td>
      <td class="system">
        <input type="hidden" class="ProjectID" name="ProjectID" value="3" />
      </td>
      <td>
        <input type="submit" value="Submit">
      </td>
    </tr>
  </table>
</form>
<img class="add-author" src="http://www.clker.com/cliparts/J/N/5/l/n/k/add-button-blue-md.png" />

JavaScript

var counter = 1;
jQuery('img.add-author').click(function(event) {
  event.preventDefault();
  counter++;
  var newRow = $('table.Parameter#new').append($('#template').html().replace('{counter}', counter));
  jQuery('table.Parameter#new').append(newRow);
});

$(document).on('change', '.parameters,.cost,.amount,.unit', function() {
      var $tr = $(this).closest('tr');
      var sum = -1 * $('.amount', $tr).val() * $('.cost', $tr).val() * $('.unit', $tr).val();
      $(".minisum", $tr).html(sum);
});