JSFiddle - React, Tailwind, and code Playground

by hcanning2012

HTML

<table width="100%">
<tr> 
  <td>
    <label>
      <input type="checkbox" name="colorCheckbox" value="n1"> Show Price
    </label>
  </td>
  <td>
    <div class="n1 box">200</div>
  </td>
</tr>

<tr> 
  <td>
    <label>
      <input type="checkbox" name="colorCheckbox" value="n2"> Show Price
    </label>
  </td>
  <td>
    <div class="n2 box">200</div>
  </td>
</tr>

<tr> 
  <td>
    <label>
      <input type="checkbox" name="colorCheckbox" value="n3"> Show Price
    </label>
  </td>
  <td>
    <div class="n3 box">200</div>
  </td>
</tr>

<tr> 
  <td>
    <label>
    <select value="n4" id="n4">
        <option value="0">Choose...</option>
        <option value="10">item 1</option>
        <option value="20">item 2</option>
   </select>
  </td>
  <td>
    <div class="n4"></div>
  </td>
</tr>


<tr> 
  <td>
    <label>
    <select value="n5" id="n5">
        <option value="0" selected>Choose...</option>
        <option value="3">item 1</option>
        <option value="4">item 2</option>
   </select>
  </td>
  <td>
    <div class="n5"></div>
  </td>
</tr>



<tr> 
<td > Total: </td><td><div id="sum">0</div></td>
</tr>

CSS

.box {
  display: none;
}

JavaScript

$(document).ready(function() {
var sum = 0;
var optionValue = 0;
  $('input[type="checkbox"]').change(function() {
    var inputValue = $(this).attr("value");

   if(this.checked) {
       sum = parseInt(sum) + parseInt($("." + inputValue).text());
   }else {
       sum = parseInt(sum) - parseInt($("." + inputValue).text());
    }
    $("#sum").text(sum);

    $("." + inputValue).toggle();
  });


  $('select').change(function() {
      var selectValue = $(this).attr("value");
      var optionValue = (this.value);
      $("." + selectValue).text(optionValue);
      
      
       if('option:selected',this) {
       sum = parseInt(sum) + parseInt($("." + selectValue).text());
       alert("pi"+parseInt(sum));
       alert("sv"+parseInt($("." + selectValue).text()));
   }else if('option:selected',this) {
       sum = parseInt(sum) - parseInt($("." + selectValue).text());
    }
      
      $("#sum").text(sum);
      alert("s1-"+sum);
    });
    alert("s2-"+sum);
});