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() {                                                  (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; });
                         }        
                    $("#total").text(total); 
                };     
        }());
          });         
      });
});