hide option and remove value if siblings' value is larger than goal, and restore the removed tag if siblings' value is smaller than goal

We have a goal number that the option tag’s values must be greater than. I am using jQuery to keep the option tags hidden. They only appear if the previous siblings’ values are not greater than the goal number (in this case 450).

Here is the jQuery to hide or show the select tags with their options

if ($('#maxTPH1').val() < $('#tphNeeded').val()) {
            $('#selectedSourceMaterial2, #materialInput2').fadeIn(800).css("display", "inline-block");
            $('#sourceMaterialDivImage').css('margin-bottom', "17%");
        } else {
            $('#selectedSourceMaterial2, #materialInput2').css("display", "none");
            $('#sourceMaterialDivImage').css('margin-bottom', "13%");
        }

This works and the select elements fade in or hide according to if their siblings’ value is less than or greater than the goal number (‘#tphNeeded’)

The first challenge is, once I select an option (say the 3rd select tag) and it gains a value, if I change any of it’s previous sibling’s (the first two select tags) values to make them greater than the goal number, the third select tag is hidden, but it’s value remains part of the total forms value.

Ex: If

       maxTPH1 = 200: 
       maxTPH2 = 200:
       maxTPH3 = 200:

My total value is 600. The select tags keep appearing as long as my total value is less than, in this case 450. If I go back and change select 2 to 300 my total value for the first two select tags is 500 so select 3 is hidden because their value is greater than the goal of 450, however my select tag 3’s value will not go to 0 unless I set it to 0 with

if (maxTPH1 + maxTPH2 >= $('#tphNeeded').val() ) {
  maxTPH3 = 0;
  maxTPH4 = 0;
}

We have a limit of four select tags.

I can set the tags back to 0.

If I was two change the first two tags back to 200 again though and the third tag appeared again, the value of 200 still shows up, but now it’s calculated as 0. Even though the number says 200. I believe it has something to do with the scope, or order of operations.
This is the code snippet

var maxTPH1 = 0;
var maxTPH2 = 0;
var maxTPH3 = 0;
var maxTPH4 = 0;
var tphAdditonalNeededValue;

$(document).ready(function() {


  jQuery.selectValidator = function selectValidator() {
    // If value of #maxTPH1 is less than #tphNeeded add a second bin, if they change option one re-evaluate
    if ($('#maxTPH1').val() < $('#tphNeeded').val()) {
      $('#selectedSourceMaterial2, #materialInput2').fadeIn(800).css("display", "inline-block");
      $('#sourceMaterialDivImage').css('margin-bottom', "17%");
    } else {
      $('#selectedSourceMaterial2, #materialInput2').css("display", "none");
      $('#sourceMaterialDivImage').css('margin-bottom', "13%");
    }

    // If value of #maxTPH1 + #maxTPH2 is less than #tphNeeded add a third bin
    if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val())) < parseInt($('#tphNeeded').val())) {
      $('#selectedSourceMaterial3, #materialInput3').fadeIn(800).css("display", "inline-block");
    } else {
      $('#selectedSourceMaterial3, #materialInput3').css("display", "none");
      $('#selectedSourceMaterial4, #materialInput4').css("display", "none");
    }


    // If value of #maxTPH1 + #maxTPH2 + #maxTPH3 is less than #tphNeeded add a fourth bin
    if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val()) + parseInt($('#maxTPH3').val())) < parseInt($('#tphNeeded').val())) {
      $('#selectedSourceMaterial4, #materialInput4').fadeIn(800).css("display", "inline-block");

    } else {
      $('#selectedSourceMaterial4, #materialInput4').css("display", "none");
    }





    var tphAdditonalNeededValue = parseInt($('#tphNeeded').val()) -
      (parseInt(maxTPH1) + parseInt(maxTPH2) + parseInt(maxTPH3) + parseInt(maxTPH4));

    $('#tphAdditionalNeeded').val(tphAdditonalNeededValue);




    // Puts 0 in #tphAdditionalNeeded as soon as the value becomes less than 1
    // if (tphAdditonalNeededValue < 1) {
    // 	$('#tphAdditionalNeeded').val(0);
    // }






    // Calculations when aggregates are selected





    // Reset select options values


    // if ( $('#maxTPH4').is(':hidden') ) {
    // 	maxTPH4 = 0;
    // }


    // Your changes have been reverted



  } // end of select Validator









  // When select tag changes, take value of selected option and make it #maxTPH1 value
  $('#selectedSourceMaterial1').on("change", function() {
    $('#maxTPH1').val($('#selectedSourceMaterial1 option:selected').val());
    if ($('#maxTPH1').val() != null) {
      maxTPH1 = $('#maxTPH1').val();
    }

    $.selectValidator();
    // $.tphAdjustment();

  });

  // When select tag changes, take value of selected option and make it #maxTPH2 value
  $('#selectedSourceMaterial2').on("change", function() {
    $('#maxTPH2').val($('#selectedSourceMaterial2 option:selected').val());

    if ($('#maxTPH2').val() != null) {
      maxTPH2 = $('#maxTPH2').val();
    }

    $.selectValidator();

  });


  // When select tag changes, take value of selected option and make it #maxTPH3 value
  $('#selectedSourceMaterial3').on("change", function() {
    $('#maxTPH3').val($('#selectedSourceMaterial3 option:selected').val());

    if ($('#maxTPH3').val() != null) {
      maxTPH3 = $('#maxTPH3').val();
    }

    $.selectValidator();

  });

  // When select tag changes, take value of selected option and make it #maxTPH4 value
  $('#selectedSourceMaterial4').on("change", function() {
    $('#maxTPH4').val($('#selectedSourceMaterial4 option:selected').val());

    if ($('#maxTPH4').val() != null) {
      maxTPH4 = $('#maxTPH4').val();
    }

    $.selectValidator();

    if ((parseInt($('#maxTPH1').val()) + parseInt($('#maxTPH2').val()) + parseInt($('#maxTPH3').val()) + parseInt($('#maxTPH4').val())) < parseInt($('#tphNeeded').val())) {
      alert("You do not have enough material to calibrate with the target tons desired!");
    }


  });




  //Removes default select tags after each select is changed
  $('#selectedSourceMaterial1').on("change", function() {
    $('#defaultSelect1').remove(); // Removes default select tag after person selects option

  });

  $('#selectedSourceMaterial2').on("change", function() {
    $('#defaultSelect2').remove(); // Removes default select tag after person selects option2

  });

  $('#selectedSourceMaterial3').on("change", function() {
    $('#defaultSelect3').remove(); // Removes default select tag after person selects option2

  });

  $('#selectedSourceMaterial4').on("change", function() {
    $('#defaultSelect4').remove(); // Removes default select tag after person selects option2

  });





  // Opens Calibration LightBox and Overlay
  $('.calibrationButton').click(function() {
    $("#calibration").css("width", "100%");
    $('#sourceMaterialDiv, #sourceMaterialForm').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(230,230,0,0.6)"); //Gets noticeCalibrationDiv color
  });

  // Closes noticeCalibration div and fades in inspect reminder prompt
  $('.noticeCalibration').click(function() {
    $('#noticeCalibrationDiv').hide();
    $('#calibrationInspectDiv').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(204,0,0,0.6)"); // Gets calibration Inspect color
  });

  // Closes calibratioInspect div and fades in configure prompt
  $('.calibrationInspect').click(function() {
    $('#calibrationInspectDiv').hide();
    $('#targetTonsDiv, #targetTonsForm').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(0,179,0,0.6)"); // Gets targetTons div's color
  });

  // Closes calibratioInspect div and fades in configure prompt
  $('.targetTons').click(function() {
    $('#targetTonsDiv').hide();
    $('#sourceMaterialDiv, #sourceMaterialForm').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(0,179,0,0.6)"); // Gets sourceMaterial div's color
  });

  $('.sourceMaterial').click(function() {
    $('#sourceMaterialDiv').hide();
    $('#adjustedTPH, #adjustedTPHFormDiv').fadeIn(1000);
    $('.overlay').css("background-color", "rgba(0,0,204,0.4)"); // Gets adjustedTPH div's color
  });






  // Cancels calibration and closes overlay
  $('.cancelCalibration').click(function() {
    $("#calibration").css("width", "0");
    $('.calibrationList li div').css("display", "none");
  });


  $('.testForError').click(function() {
    $("body").css("background-color", "green");
  });


  // Adds class to selected radio button and removes class from sibling radio buttons for enable/disable feature
  $('#ttRadioForm input').click(function() {
    $(this).addClass('ttRadioSelected').siblings().removeClass('ttRadioSelected');

    //Adds and removes classes and disable/enabled on input fields if related radio button is checked or unchecked
    if ($('#radioHigh').hasClass('ttRadioSelected')) {
      $('#inputHigh').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
    }

    if ($('#radioMid').hasClass('ttRadioSelected')) {
      $('#inputMid').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
    }

    if ($('#radioLow').hasClass('ttRadioSelected')) {
      $('#inputLow').addClass('ttInputEnabled').prop('disabled', false).siblings().removeClass('ttInputEnabled').prop('disabled', true);
    }

  });


  //attach keypress to input
  $('#ttInputForm input, #targetTestTons').keydown(function(event) {
    // Allow special chars + arrows 
    if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ||
      (event.keyCode == 190 && event.shiftKey !== true) ||
      event.keyCode == 27 || event.keyCode == 13 ||
      (event.keyCode == 65 && event.ctrlKey === true) ||
      (event.keyCode >= 35 && event.keyCode <= 39)) {
      return;
    } else {
      // If it's not a number stop the keypress
      if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
        event.preventDefault();
      }
    }
  });



























}); // End of Document.ready
/*@font-face {
    font-family: 'Droid-Serif';
    src: url(../fonts/Droid_Serif/DroidSerif.ttf);
}*/

body {
  background-image: url("../images/scalesbackground.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: black;
}


/* The Overlay (background) */

.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 0;
  position: fixed;
  /* Stay in place */
  z-index: 100;
  /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0, 0, 0);
  /* Black fallback color */
  background-color: rgba(0, 0, 0, 0.6);
  /* Black w/opacity */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  /*transition: 0.1s;*/
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}


/* Position the content inside the overlay */

.overlay-content {
  position: relative;
  top: 25%;
  /* 25% from the top */
  width: 100%;
  /* 100% width */
  text-align: center;
  /* Centered text/links */
}

.calibrationList {
  width: 90%;
  margin-top: 15%;
  background-color: white;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  border: black solid 1px;
}

.calibrationList li div {
  /* Stops calibration divs from displaying until jQuery shows them */
  display: none;
  font-family: "Arial";
  font-weight: bold;
}

.calibrationList form {
  margin-bottom: .8em;
}

.calibrationList li p {
  display: inline-block;
  margin: 0px 0px 16px 20px;
  width: 75%;
  font-size: 12pt;
  line-height: 22px;
}

.calibrateDivImage {
  display: inline-block;
  width: 13%;
  padding: 6px;
}

#targetTonsDiv img,
#calibrationInspectDiv img {
  margin-bottom: 16%;
}

#sourceMaterialDivImage {
  width: 13%;
  margin-bottom: 13%;
}

#adjustedTPH img {
  width: 11%;
  padding: 0px;
}

.buttonDiv {
  margin-left: 50%;
}

.buttonDiv button {
  background-color: gray;
  padding: 5px 23px 5px 23px;
  font-size: 16px;
  border-radius: 30px;
  outline: none;
}

#targetTonsHeader,
#sourceMaterialHeader,
#adjustedTPHHeader {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1%;
}

#targetTonsForm {
  width: 70%;
  display: inline-block;
  margin: 5px 0px 15px 15px;
  padding: 10px 5px 5px 5px;
}

#targetTonsForm p {
  text-align: center;
  margin-bottom: 0;
}

#targetTonsForm form {
  border: 2px solid black;
  display: inline-block;
}

#ttRadioForm {
  width: 30%;
  line-height: 23px;
  margin-right: 0px;
  margin-left: 5%;
}

#ttInputForm {
  margin-left: -5px;
}

#targetTestTonsForm {
  border: none !important;
  width: 100%;
  margin-left: -7%;
  margin-top: 5%;
}

#ttInputForm input {
  height: 23px;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 2px solid black;
  padding-left: 5px;
  outline: none;
  font-size: 16px;
}

#targetTestTonsForm input {
  height: 23px;
  font-size: 16px;
  outline: none;
  margin-left: -3%;
  width: 49%;
  border: 2px solid black;
}

#targetTestTonsForm p {
  width: 45%;
  margin: 0;
  padding: 0;
}

.ttTextBottomInput {
  border-bottom: 0px !important;
}

#ttInputForm input:disabled {
  background-color: gray;
}

#sourceMaterialForm,
#adjustedTPHFormDiv {
  width: 85%;
  display: inline-block;
  margin-left: 1%;
}

#sourceMaterialForm select,
#adjustedTPH select {
  width: 51%;
  height: 23px;
  font-size: 16px;
}

#selectedSourceMaterial2,
#materialInput2,
#selectedSourceMaterial3,
#materialInput3,
#selectedSourceMaterial4,
#materialInput4 {
  display: none;
}

.sourceMaterialSelectInputForm,
.adjustedTPHInputForm {
  display: inline-block;
  width: 47%;
}

.sourceMaterialSelectInputForm input,
.adjustedTPHInputForm input {
  width: 48%;
  outline: none;
  height: 23px;
  font-size: 16px;
  border: 2px solid black;
}

.maxTPH {
  margin-right: -3%;
}

#tphNeededSourceMaterialP,
#tphAdditionalNeededSourceMaterialP {
  width: 69%;
  text-align: right;
  display: inline-block;
}

.tphNeeded {
  width: 22%;
  display: inline-block;
}

.tphNeeded input {
  width: 100%;
  border: 2px solid black;
  height: 23px;
  font-size: 16px;
}

.maxTPHLabel {
  margin-left: 8%;
}

.adjTPHLabel {
  margin-left: 11%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<html>

<head>
  <title>Test Modal</title>

  <!-- Stylesheets -->
  <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow" href="css/style.css">

  <!-- Scripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="js/main.js"></script>
  <script src="js/sourceMaterial.js"></script>
</head>

<body>

  <div id="calibration" class="overlay">


    <!-- Overlay content -->

    <ul class="calibrationList">



      <li>
        <div id="sourceMaterialDiv" class="overlayContent">
          <p id="sourceMaterialHeader">Please select the source material</p>
          <img id="sourceMaterialDivImage" src="images/questionicon.png">
          <div id="sourceMaterialForm">
            <select id="selectedSourceMaterial1" name="selectedSourceMaterial1">
				  	  <option id="defaultSelect1" value="0" selected>--SELECT--</option>
				  	  <option class="selectedOption" value="100">stone</option>
              <option class="selectedOption" value="200">gold</option>
              <option class="selectedOption" value="300">rainbows</option>
					</select>
            <form id="materialInput1" class="sourceMaterialSelectInputForm">
              <label class="maxTPHLabel">Max TPH</label> <label class="adjTPHLabel">Adj. TPH</label> </br>
              <input class="maxTPH" type="text" id="maxTPH1" name="maxTPH1" maxlength="7" disabled>
              <input class="adjTPH" type="text" id="adjTPH1" name="adjTPH1" maxlength="7" placeholder=" " disabled>
            </form>





            <!--Second select and form appear if additional TPH is needed  -->
            <select id="selectedSourceMaterial2" name="selectedSourceMaterial2">
					  <option id="defaultSelect2" value="0" selected>--SELECT--</option>
				  	 <option class="selectedOption" value="100">stone</option>
             <option class="selectedOption" value="200">gold</option>
             <option class="selectedOption" value="300">rainbows</option>
					</select>
            <form id="materialInput2" class="sourceMaterialSelectInputForm">
              <input class="maxTPH" type="text" id="maxTPH2" name="maxTPH2" maxlength="7" placeholder=" " disabled>
              <input class="adjTPH" type="text" id="adjTPH2" name="adjTPH2" maxlength="7" placeholder=" " disabled>
            </form>




            <!--Third select and form appear if additional TPH is needed  -->
            <select id="selectedSourceMaterial3" name="selectedSourceMaterial3">
					  <option id="defaultSelect3" value="0" selected>--SELECT--</option>
				  	 <option class="selectedOption" value="100">stone</option>
             <option class="selectedOption" value="200">gold</option>
             <option class="selectedOption" value="300">rainbows</option>
					</select>
            <form id="materialInput3" class="sourceMaterialSelectInputForm">
              <input class="maxTPH" type="text" id="maxTPH3" name="maxTPH3" maxlength="7" placeholder=" " disabled>
              <input class="adjTPH" type="text" id="adjTPH3" name="adjTPH3" maxlength="7" placeholder=" " disabled>
            </form>






            <!--Fourth select and form appear if additional TPH is needed  -->
            <select id="selectedSourceMaterial4" name="selectedSourceMaterial4">
					  <option id="defaultSelect4" value="0" selected>--SELECT--</option>
				  	  <option class="selectedOption" value="100">stone</option>
              <option class="selectedOption" value="200">gold</option>
              <option class="selectedOption" value="300">rainbows</option>
					</select>
            <form id="materialInput4" class="sourceMaterialSelectInputForm">
              <input class="maxTPH" type="text" id="maxTPH4" name="maxTPH4" maxlength="7" placeholder=" " disabled>
              <input class="adjTPH" type="text" id="adjTPH4" name="adjTPH4" maxlength="7" placeholder=" " disabled>
            </form>





            </br>
            <p id="tphNeededSourceMaterialP">TPH Needed</p>
            <form class="tphNeeded">
              <input type="text" id="tphNeeded" name="tphNeeded" maxlength="7" value="450" disabled>
            </form>
            </br>
            <p id="tphAdditionalNeededSourceMaterialP">Additional TPH Needed</p>
            <form class="tphNeeded">
              <input type="text" id="tphAdditionalNeeded" name="tphAdditionalNeeded" maxlength="7" placeholder=" " disabled>
            </form>

          </div>
          <!--End of sourceMaterialForm -->


          <div class="buttonDiv">
            <button class="cancelCalibration">Cancel</button>
            <button type="submit" class="sourceMaterial">Ok</button>
          </div>
          <!--End of buttonDiv  -->
        </div>
      </li>









      <li>
        <div id="adjustedTPH" class="overlayContent">
          <p id="adjustedTPHHeader">The materials were redistributed as shown</p>
          <img id="infoIcon" class="calibrateDivImage" src="images/infoicon.png">
          <div id="adjustedTPHFormDiv">

            <select id="adjustedSourceMaterial1" name="selectedSourceMaterial1">
					  	  <?php require 'selectoptions.php'; ?>
						</select>
            <form id="adjustedTPH1" class="adjustedTPHInputForm">
              <label class="maxTPHLabel">Max TPH</label> <label class="adjTPHLabel">Adj. TPH</label> </br>
              <input class="maxTPH" type="text" id="adjustedMax1" name="maxTPH1" maxlength="7" disabled>
              <input class="adjTPH" type="text" id="adjustedAdj1" name="adjTPH1" maxlength="7" placeholder=" " disabled>
            </form>



            </br>
            <p id="tphNeededSourceMaterialP">TPH Needed</p>
            <form class="tphNeeded">
              <input type="text" id="tphNeeded" name="tphNeeded" maxlength="7" value="450" disabled>
            </form>
            </br>
            <p id="tphAdditionalNeededSourceMaterialP">Additional TPH Needed</p>
            <form class="tphNeeded">
              <input type="text" id="tphAdditionalNeeded" name="tphAdditionalNeeded" maxlength="7" placeholder=" " disabled>
            </form>


          </div>
          <!--End of adjustedTPHFormDiv -->


          <div class="buttonDiv">
            <button class="cancelCalibration">Cancel</button>
            <button class="adjustedTPHButton">Ok</button>
          </div>
          <!--End of buttonDiv  -->
        </div>
        <!--End of adjustedTPH Div -->
      </li>




    </ul>








  </div>
  <!--End of #calibration .overlay -->



  <!-- Use any element to open/show the overlay navigation menu -->
  <button class="calibrationButton"><span>Calibrate</span></button>








</body>

</html>

Let me know if you need me to explain something. This could be a useful trick that a lot of us could use if we figure it out!



You could get the total of the :visible selects…

I used a total variable below… And looped through all the visible selects.
The setTimeout() is needed because of the animation delays of hide/show the selects.

setTimeout(function(){
  console.clear();
  var total=0;
    $("[id^='selectedSourceMaterial']:visible").each(function(){
      console.log($(this).val());
      total += parseInt($(this).val());
    });
    console.log(total);
    //var tphAdditonalNeededValue = parseInt($('#tphNeeded').val()) - (parseInt(maxTPH1) + parseInt(maxTPH2) + parseInt(maxTPH3) + parseInt(maxTPH4));

    var tphAdditonalNeededValue = parseInt($('#tphNeeded').val()) - total; 
    $('#tphAdditionalNeeded').val(tphAdditonalNeededValue);
},1000);

You can try the below snippet.