Using >= gives incorrect results?

Question

I have 2 tables with 10 rows each. There are two dropdowns. First one numbered 1-10 and the second numbered 11-20.

Now, rows 1-10 are all in the same class and 11-20 in the same class.

The problem is that let's say I select only the second dropdown and choose "13", it should only give me the rows numbered from "11 - 13", and not the ones from "1 - 10". Currently, if I choose a value from the second dropdown, it automatically shows the rows from 1-10 as well. It should not do this.

First loop for container row with class <tr class="input-containers Container1"></tr> up to <tr class="input-containers Container10"></tr>

<script>
$(document).ready(function() {
  function hideAllContainers() {

    $(".input-containers").hide();
    $("#input-containers").show();
  }
  //#containers is the dropdown with options 1-10
  $('#containers').on('change', function() {

    hideAllContainers();
    var count = parseInt(this.value);

    for (i = 1; i <= count; i++) {
    console.log($(".Container" + i));
      $(".Container" + i).show();
    }
  });
});
</script>

Second loop for container row with class <tr class="input-secondcontainers Container11"></tr> up to <tr class="input-secondcontainers Container20"></tr>

<script>
$(document).ready(function() {
  function hideAllContainers2() {

    $(".input-secondcontainers").hide();
    $("#input-secondcontainers").show();

  }
  //#containers2 is the dropdown with options 11-20
  $('#containers2').on('change', function() {

    hideAllContainers2();
    var count = parseInt(this.value);

    for (i = 1; i >= count; i++) {
    console.log($(".Container" + i));
      $(".Container" + i).show();
    }
  });
});
</script>

Answer 1

Try this on the second for loop:

 $('#containers2').on('change', function() {

    hideAllContainers2();
    var count = parseInt(this.value);

    for (i = 11; i <= count; i++) {
    console.log($(".Container" + i));
      $(".Container" + i).show();
    }
  });