JSFiddle - React, Tailwind, and code Playground

by Annie Lagang

HTML

<select id="ComboBox">
    <option value="0">Value 0</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option> 
</select>

<select id="ComboBox2">
    <option value="0">Value 0</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option> 
</select>

<div id="total"></div>

JavaScript

$(function() {        
      $("select[id*='ComboBox']").each(          
          function() {              
              $(this).change(
                  function() {                                                  compute(this);
              });         
      });
    
    var compute = (function () {
    var total = 11; 
    var selectedDdl = [];
    
    $("#total").text(total);     
    return function (ctrl) {
         var id = $(ctrl).attr("id");
         var ddlMeal = document.getElementById(id);
         var found = jQuery.inArray(id, selectedDdl);
         
        if (ddlMeal.options[ddlMeal.selectedIndex].value != 0){
             if(found == -1){
                 total += 1; 
                 selectedDdl.push(id);        
             } 
             else{
                 total = total;
             }
         }
         else {
             total -= 1;
             var valueToRemove = id;
             selectedDdl = $.grep(selectedDdl, function(val) { return val != valueToRemove; });
             //selectedDdl.splice(selectedDdl.length - 1, 1);
         }        
        
         $("#total").text(total); 
    };     
}());
});