count the active classes on both choices












0















I'm working on 2 selections, that adds active class on click and add disabled class on the opposite selection. My problem is how get the count of classes exist on both selection ex. selection1 = 1 and selection2 = 5. Also my counting and display of result is off.



Hope you help me thanks.






$('.numChoice > .col-md-5ths > .num').on("click", function() {

    var idx = $(this).parent().index();

    var act = $(this).is(".active");

    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one

    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");

    $(this).toggleClass('active');

    $otherElement.toggleClass('disabled', !act);



    var len1 = $otherSide.find('.active').length;

    var len2 = $(this).closest('.numChoice').find('.active').length;

    console.log('selection1: ' + len1, 'selection2: ' + len2);



});

.numChoice {

  display: block;

}



.num {

  width: 20px;

  height: 20px;

  background-color: #DDD;

  text-align: center;

  float: left;

  cursor: pointer;

}



.num.active {

  color: green;

}



.num.disabled {

  color: red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <div class="numChoice first-row">

    <div class="col-md-5ths">

      <div class="num">1</div>

    </div>

    <div class="col-md-5ths">

      <div class="num">2</div>

    </div>

    <div class="col-md-5ths">

      <div class="num">3</div>

    </div>

    <div class="col-md-5ths">

      <div class="num">4</div>

    </div>

    <div class="col-md-5ths">

      <div class="num">5</div>

    </div>

  </div>

  <br><br>

  <div class="numChoice second-row">

    <div class="col-md-5ths">

      <div class="num">1</div>

    </div>

    <div class="col-md-5ths">

      <div class="num">2</div>

    </div>

    <div class="col-md-5ths">

      <div class="num">3</div>

    </div>

    <div class="col-md-5ths">

      <div class="num">4</div>

    </div>

    <div class="col-md-5ths">

      <div class="num">5</div>

    </div>

  </div>

</div>








javascript jquery







share|improve this question



























    0















    I'm working on 2 selections, that adds active class on click and add disabled class on the opposite selection. My problem is how get the count of classes exist on both selection ex. selection1 = 1 and selection2 = 5. Also my counting and display of result is off.



    Hope you help me thanks.






    $('.numChoice > .col-md-5ths > .num').on("click", function() {
    
    var idx = $(this).parent().index();
    
    var act = $(this).is(".active");
    
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
    
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
    
    $(this).toggleClass('active');
    
    $otherElement.toggleClass('disabled', !act);
    

    
    var len1 = $otherSide.find('.active').length;
    
    var len2 = $(this).closest('.numChoice').find('.active').length;
    
    console.log('selection1: ' + len1, 'selection2: ' + len2);
    

    
});

    .numChoice {
    
  display: block;
    
}
    

    
.num {
    
  width: 20px;
    
  height: 20px;
    
  background-color: #DDD;
    
  text-align: center;
    
  float: left;
    
  cursor: pointer;
    
}
    

    
.num.active {
    
  color: green;
    
}
    

    
.num.disabled {
    
  color: red;
    
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
<div class="container">
    
  <div class="numChoice first-row">
    
    <div class="col-md-5ths">
    
      <div class="num">1</div>
    
    </div>
    
    <div class="col-md-5ths">
    
      <div class="num">2</div>
    
    </div>
    
    <div class="col-md-5ths">
    
      <div class="num">3</div>
    
    </div>
    
    <div class="col-md-5ths">
    
      <div class="num">4</div>
    
    </div>
    
    <div class="col-md-5ths">
    
      <div class="num">5</div>
    
    </div>
    
  </div>
    
  <br><br>
    
  <div class="numChoice second-row">
    
    <div class="col-md-5ths">
    
      <div class="num">1</div>
    
    </div>
    
    <div class="col-md-5ths">
    
      <div class="num">2</div>
    
    </div>
    
    <div class="col-md-5ths">
    
      <div class="num">3</div>
    
    </div>
    
    <div class="col-md-5ths">
    
      <div class="num">4</div>
    
    </div>
    
    <div class="col-md-5ths">
    
      <div class="num">5</div>
    
    </div>
    
  </div>
    
</div>








    javascript jquery







    share|improve this question

























      0












      0








      0








      I'm working on 2 selections, that adds active class on click and add disabled class on the opposite selection. My problem is how get the count of classes exist on both selection ex. selection1 = 1 and selection2 = 5. Also my counting and display of result is off.



      Hope you help me thanks.






      $('.numChoice > .col-md-5ths > .num').on("click", function() {
      
    var idx = $(this).parent().index();
      
    var act = $(this).is(".active");
      
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
      
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
      
    $(this).toggleClass('active');
      
    $otherElement.toggleClass('disabled', !act);
      

      
    var len1 = $otherSide.find('.active').length;
      
    var len2 = $(this).closest('.numChoice').find('.active').length;
      
    console.log('selection1: ' + len1, 'selection2: ' + len2);
      

      
});

      .numChoice {
      
  display: block;
      
}
      

      
.num {
      
  width: 20px;
      
  height: 20px;
      
  background-color: #DDD;
      
  text-align: center;
      
  float: left;
      
  cursor: pointer;
      
}
      

      
.num.active {
      
  color: green;
      
}
      

      
.num.disabled {
      
  color: red;
      
}

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      
<div class="container">
      
  <div class="numChoice first-row">
      
    <div class="col-md-5ths">
      
      <div class="num">1</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">2</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">3</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">4</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">5</div>
      
    </div>
      
  </div>
      
  <br><br>
      
  <div class="numChoice second-row">
      
    <div class="col-md-5ths">
      
      <div class="num">1</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">2</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">3</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">4</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">5</div>
      
    </div>
      
  </div>
      
</div>








      javascript jquery







      share|improve this question














      I'm working on 2 selections, that adds active class on click and add disabled class on the opposite selection. My problem is how get the count of classes exist on both selection ex. selection1 = 1 and selection2 = 5. Also my counting and display of result is off.



      Hope you help me thanks.






      $('.numChoice > .col-md-5ths > .num').on("click", function() {
      
    var idx = $(this).parent().index();
      
    var act = $(this).is(".active");
      
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
      
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
      
    $(this).toggleClass('active');
      
    $otherElement.toggleClass('disabled', !act);
      

      
    var len1 = $otherSide.find('.active').length;
      
    var len2 = $(this).closest('.numChoice').find('.active').length;
      
    console.log('selection1: ' + len1, 'selection2: ' + len2);
      

      
});

      .numChoice {
      
  display: block;
      
}
      

      
.num {
      
  width: 20px;
      
  height: 20px;
      
  background-color: #DDD;
      
  text-align: center;
      
  float: left;
      
  cursor: pointer;
      
}
      

      
.num.active {
      
  color: green;
      
}
      

      
.num.disabled {
      
  color: red;
      
}

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      
<div class="container">
      
  <div class="numChoice first-row">
      
    <div class="col-md-5ths">
      
      <div class="num">1</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">2</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">3</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">4</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">5</div>
      
    </div>
      
  </div>
      
  <br><br>
      
  <div class="numChoice second-row">
      
    <div class="col-md-5ths">
      
      <div class="num">1</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">2</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">3</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">4</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">5</div>
      
    </div>
      
  </div>
      
</div>








      $('.numChoice > .col-md-5ths > .num').on("click", function() {
      
    var idx = $(this).parent().index();
      
    var act = $(this).is(".active");
      
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
      
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
      
    $(this).toggleClass('active');
      
    $otherElement.toggleClass('disabled', !act);
      

      
    var len1 = $otherSide.find('.active').length;
      
    var len2 = $(this).closest('.numChoice').find('.active').length;
      
    console.log('selection1: ' + len1, 'selection2: ' + len2);
      

      
});

      .numChoice {
      
  display: block;
      
}
      

      
.num {
      
  width: 20px;
      
  height: 20px;
      
  background-color: #DDD;
      
  text-align: center;
      
  float: left;
      
  cursor: pointer;
      
}
      

      
.num.active {
      
  color: green;
      
}
      

      
.num.disabled {
      
  color: red;
      
}

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      
<div class="container">
      
  <div class="numChoice first-row">
      
    <div class="col-md-5ths">
      
      <div class="num">1</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">2</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">3</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">4</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">5</div>
      
    </div>
      
  </div>
      
  <br><br>
      
  <div class="numChoice second-row">
      
    <div class="col-md-5ths">
      
      <div class="num">1</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">2</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">3</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">4</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">5</div>
      
    </div>
      
  </div>
      
</div>





      $('.numChoice > .col-md-5ths > .num').on("click", function() {
      
    var idx = $(this).parent().index();
      
    var act = $(this).is(".active");
      
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
      
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
      
    $(this).toggleClass('active');
      
    $otherElement.toggleClass('disabled', !act);
      

      
    var len1 = $otherSide.find('.active').length;
      
    var len2 = $(this).closest('.numChoice').find('.active').length;
      
    console.log('selection1: ' + len1, 'selection2: ' + len2);
      

      
});

      .numChoice {
      
  display: block;
      
}
      

      
.num {
      
  width: 20px;
      
  height: 20px;
      
  background-color: #DDD;
      
  text-align: center;
      
  float: left;
      
  cursor: pointer;
      
}
      

      
.num.active {
      
  color: green;
      
}
      

      
.num.disabled {
      
  color: red;
      
}

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      
<div class="container">
      
  <div class="numChoice first-row">
      
    <div class="col-md-5ths">
      
      <div class="num">1</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">2</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">3</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">4</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">5</div>
      
    </div>
      
  </div>
      
  <br><br>
      
  <div class="numChoice second-row">
      
    <div class="col-md-5ths">
      
      <div class="num">1</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">2</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">3</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">4</div>
      
    </div>
      
    <div class="col-md-5ths">
      
      <div class="num">5</div>
      
    </div>
      
  </div>
      
</div>





      javascript jquery




      javascript jquery






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 16 '18 at 4:40









      user123user123

      9214




      9214
























          2 Answers
          2






          active

          oldest

          votes


















          1














          If I understand, you want to count the active classes for the first row against the second row:



          const firstRowActiveLabels = $('.numChoice.first-row .active').length;
          
const secondRowActiveLabels = $('.numChoice.second-row .active').length;


          .numChoice.first-row means: get the class that has numChoice and has first-row classes.
          .active means: and get the inner elements that has active class.






          $('.numChoice > .col-md-5ths > .num').on("click", function() {
          
    var idx = $(this).parent().index();
          
    var act = $(this).is(".active");
          
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
          
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
          
    $(this).toggleClass('active');
          
    $otherElement.toggleClass('disabled', !act);
          

          
    var len1 = $('.numChoice.first-row .active').length;
          
    var len2 = $('.numChoice.second-row .active').length;
          
    console.log('selection1: ' + len1, 'selection2: ' + len2);
          

          
});

          .numChoice {
          
  display: block;
          
}
          

          
.num {
          
  width: 20px;
          
  height: 20px;
          
  background-color: #DDD;
          
  text-align: center;
          
  float: left;
          
  cursor: pointer;
          
}
          

          
.num.active {
          
  color: green;
          
}
          

          
.num.disabled {
          
  color: red;
          
}

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          
<div class="container">
          
  <div class="numChoice first-row">
          
    <div class="col-md-5ths">
          
      <div class="num">1</div>
          
    </div>
          
    <div class="col-md-5ths">
          
      <div class="num">2</div>
          
    </div>
          
    <div class="col-md-5ths">
          
      <div class="num">3</div>
          
    </div>
          
    <div class="col-md-5ths">
          
      <div class="num">4</div>
          
    </div>
          
    <div class="col-md-5ths">
          
      <div class="num">5</div>
          
    </div>
          
  </div>
          
  <br><br>
          
  <div class="numChoice second-row">
          
    <div class="col-md-5ths">
          
      <div class="num">1</div>
          
    </div>
          
    <div class="col-md-5ths">
          
      <div class="num">2</div>
          
    </div>
          
    <div class="col-md-5ths">
          
      <div class="num">3</div>
          
    </div>
          
    <div class="col-md-5ths">
          
      <div class="num">4</div>
          
    </div>
          
    <div class="col-md-5ths">
          
      <div class="num">5</div>
          
    </div>
          
  </div>
          
</div>








          share|improve this answer































            1














            I've rewritten your JS part a bit. Please check if it's what you're looking for.






            $('.numChoice .num').on("click", function() {
            
    if ($(this).hasClass('disabled')){
            
      return false; // let's skip disabled items?
            
    }
            
    var idx = $(this).parent().index();
            
    $(this).toggleClass('active');
            
    var act = $(this).is(".active");
            
    const $others = $(this).closest(".numChoice").siblings();
            
    $others.each(function(){
            
      const $opposite = $(this).find('.num').eq(idx);
            
      $opposite.removeClass('active').toggleClass('disabled', act);
            
    });
            
    updateCounts();
            

            
});
            

            
function updateCounts(){
            
  const len1 = $('.first-row .active').length;
            
  const len2 = $('.second-row .active').length;
            
  console.clear();
            
  console.log('selection1: ' + len1, 'selection2: ' + len2);
            
}

            .numChoice {
            
  display: block;
            
}
            

            
.num {
            
  width: 20px;
            
  height: 20px;
            
  background-color: #DDD;
            
  text-align: center;
            
  float: left;
            
  cursor: pointer;
            
}
            

            
.num.active {
            
  color: green;
            
}
            

            
.num.disabled {
            
  color: red;
            
}

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            
<div class="container">
            
  <div class="numChoice first-row">
            
    <div class="col-md-5ths">
            
      <div class="num">1</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">2</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">3</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">4</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">5</div>
            
    </div>
            
  </div>
            
  <br><br>
            
  <div class="numChoice second-row">
            
    <div class="col-md-5ths">
            
      <div class="num">1</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">2</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">3</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">4</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">5</div>
            
    </div>
            
  </div>
            
</div>








            share|improve this answer
























            • ohhh.. I thought my answer was correct ) okay

              – Roman86
              Nov 16 '18 at 5:53











            • you're answer is correct, I can't two accept two answers

              – user123
              Nov 16 '18 at 6:03











            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53331534%2fcount-the-active-classes-on-both-choices%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            If I understand, you want to count the active classes for the first row against the second row:



            const firstRowActiveLabels = $('.numChoice.first-row .active').length;
            
const secondRowActiveLabels = $('.numChoice.second-row .active').length;


            .numChoice.first-row means: get the class that has numChoice and has first-row classes.
            .active means: and get the inner elements that has active class.






            $('.numChoice > .col-md-5ths > .num').on("click", function() {
            
    var idx = $(this).parent().index();
            
    var act = $(this).is(".active");
            
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
            
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
            
    $(this).toggleClass('active');
            
    $otherElement.toggleClass('disabled', !act);
            

            
    var len1 = $('.numChoice.first-row .active').length;
            
    var len2 = $('.numChoice.second-row .active').length;
            
    console.log('selection1: ' + len1, 'selection2: ' + len2);
            

            
});

            .numChoice {
            
  display: block;
            
}
            

            
.num {
            
  width: 20px;
            
  height: 20px;
            
  background-color: #DDD;
            
  text-align: center;
            
  float: left;
            
  cursor: pointer;
            
}
            

            
.num.active {
            
  color: green;
            
}
            

            
.num.disabled {
            
  color: red;
            
}

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            
<div class="container">
            
  <div class="numChoice first-row">
            
    <div class="col-md-5ths">
            
      <div class="num">1</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">2</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">3</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">4</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">5</div>
            
    </div>
            
  </div>
            
  <br><br>
            
  <div class="numChoice second-row">
            
    <div class="col-md-5ths">
            
      <div class="num">1</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">2</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">3</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">4</div>
            
    </div>
            
    <div class="col-md-5ths">
            
      <div class="num">5</div>
            
    </div>
            
  </div>
            
</div>








            share|improve this answer




























              1














              If I understand, you want to count the active classes for the first row against the second row:



              const firstRowActiveLabels = $('.numChoice.first-row .active').length;
              
const secondRowActiveLabels = $('.numChoice.second-row .active').length;


              .numChoice.first-row means: get the class that has numChoice and has first-row classes.
              .active means: and get the inner elements that has active class.






              $('.numChoice > .col-md-5ths > .num').on("click", function() {
              
    var idx = $(this).parent().index();
              
    var act = $(this).is(".active");
              
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
              
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
              
    $(this).toggleClass('active');
              
    $otherElement.toggleClass('disabled', !act);
              

              
    var len1 = $('.numChoice.first-row .active').length;
              
    var len2 = $('.numChoice.second-row .active').length;
              
    console.log('selection1: ' + len1, 'selection2: ' + len2);
              

              
});

              .numChoice {
              
  display: block;
              
}
              

              
.num {
              
  width: 20px;
              
  height: 20px;
              
  background-color: #DDD;
              
  text-align: center;
              
  float: left;
              
  cursor: pointer;
              
}
              

              
.num.active {
              
  color: green;
              
}
              

              
.num.disabled {
              
  color: red;
              
}

              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
              
<div class="container">
              
  <div class="numChoice first-row">
              
    <div class="col-md-5ths">
              
      <div class="num">1</div>
              
    </div>
              
    <div class="col-md-5ths">
              
      <div class="num">2</div>
              
    </div>
              
    <div class="col-md-5ths">
              
      <div class="num">3</div>
              
    </div>
              
    <div class="col-md-5ths">
              
      <div class="num">4</div>
              
    </div>
              
    <div class="col-md-5ths">
              
      <div class="num">5</div>
              
    </div>
              
  </div>
              
  <br><br>
              
  <div class="numChoice second-row">
              
    <div class="col-md-5ths">
              
      <div class="num">1</div>
              
    </div>
              
    <div class="col-md-5ths">
              
      <div class="num">2</div>
              
    </div>
              
    <div class="col-md-5ths">
              
      <div class="num">3</div>
              
    </div>
              
    <div class="col-md-5ths">
              
      <div class="num">4</div>
              
    </div>
              
    <div class="col-md-5ths">
              
      <div class="num">5</div>
              
    </div>
              
  </div>
              
</div>








              share|improve this answer


























                1












                1








                1







                If I understand, you want to count the active classes for the first row against the second row:



                const firstRowActiveLabels = $('.numChoice.first-row .active').length;
                
const secondRowActiveLabels = $('.numChoice.second-row .active').length;


                .numChoice.first-row means: get the class that has numChoice and has first-row classes.
                .active means: and get the inner elements that has active class.






                $('.numChoice > .col-md-5ths > .num').on("click", function() {
                
    var idx = $(this).parent().index();
                
    var act = $(this).is(".active");
                
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
                
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
                
    $(this).toggleClass('active');
                
    $otherElement.toggleClass('disabled', !act);
                

                
    var len1 = $('.numChoice.first-row .active').length;
                
    var len2 = $('.numChoice.second-row .active').length;
                
    console.log('selection1: ' + len1, 'selection2: ' + len2);
                

                
});

                .numChoice {
                
  display: block;
                
}
                

                
.num {
                
  width: 20px;
                
  height: 20px;
                
  background-color: #DDD;
                
  text-align: center;
                
  float: left;
                
  cursor: pointer;
                
}
                

                
.num.active {
                
  color: green;
                
}
                

                
.num.disabled {
                
  color: red;
                
}

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                
<div class="container">
                
  <div class="numChoice first-row">
                
    <div class="col-md-5ths">
                
      <div class="num">1</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">2</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">3</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">4</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">5</div>
                
    </div>
                
  </div>
                
  <br><br>
                
  <div class="numChoice second-row">
                
    <div class="col-md-5ths">
                
      <div class="num">1</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">2</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">3</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">4</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">5</div>
                
    </div>
                
  </div>
                
</div>








                share|improve this answer













                If I understand, you want to count the active classes for the first row against the second row:



                const firstRowActiveLabels = $('.numChoice.first-row .active').length;
                
const secondRowActiveLabels = $('.numChoice.second-row .active').length;


                .numChoice.first-row means: get the class that has numChoice and has first-row classes.
                .active means: and get the inner elements that has active class.






                $('.numChoice > .col-md-5ths > .num').on("click", function() {
                
    var idx = $(this).parent().index();
                
    var act = $(this).is(".active");
                
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
                
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
                
    $(this).toggleClass('active');
                
    $otherElement.toggleClass('disabled', !act);
                

                
    var len1 = $('.numChoice.first-row .active').length;
                
    var len2 = $('.numChoice.second-row .active').length;
                
    console.log('selection1: ' + len1, 'selection2: ' + len2);
                

                
});

                .numChoice {
                
  display: block;
                
}
                

                
.num {
                
  width: 20px;
                
  height: 20px;
                
  background-color: #DDD;
                
  text-align: center;
                
  float: left;
                
  cursor: pointer;
                
}
                

                
.num.active {
                
  color: green;
                
}
                

                
.num.disabled {
                
  color: red;
                
}

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                
<div class="container">
                
  <div class="numChoice first-row">
                
    <div class="col-md-5ths">
                
      <div class="num">1</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">2</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">3</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">4</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">5</div>
                
    </div>
                
  </div>
                
  <br><br>
                
  <div class="numChoice second-row">
                
    <div class="col-md-5ths">
                
      <div class="num">1</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">2</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">3</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">4</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">5</div>
                
    </div>
                
  </div>
                
</div>








                $('.numChoice > .col-md-5ths > .num').on("click", function() {
                
    var idx = $(this).parent().index();
                
    var act = $(this).is(".active");
                
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
                
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
                
    $(this).toggleClass('active');
                
    $otherElement.toggleClass('disabled', !act);
                

                
    var len1 = $('.numChoice.first-row .active').length;
                
    var len2 = $('.numChoice.second-row .active').length;
                
    console.log('selection1: ' + len1, 'selection2: ' + len2);
                

                
});

                .numChoice {
                
  display: block;
                
}
                

                
.num {
                
  width: 20px;
                
  height: 20px;
                
  background-color: #DDD;
                
  text-align: center;
                
  float: left;
                
  cursor: pointer;
                
}
                

                
.num.active {
                
  color: green;
                
}
                

                
.num.disabled {
                
  color: red;
                
}

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                
<div class="container">
                
  <div class="numChoice first-row">
                
    <div class="col-md-5ths">
                
      <div class="num">1</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">2</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">3</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">4</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">5</div>
                
    </div>
                
  </div>
                
  <br><br>
                
  <div class="numChoice second-row">
                
    <div class="col-md-5ths">
                
      <div class="num">1</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">2</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">3</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">4</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">5</div>
                
    </div>
                
  </div>
                
</div>





                $('.numChoice > .col-md-5ths > .num').on("click", function() {
                
    var idx = $(this).parent().index();
                
    var act = $(this).is(".active");
                
    var $otherSide = $(this).closest(".numChoice").siblings(); // plural but only one
                
    var $otherElement = $otherSide.find(".col-md-5ths").eq(idx).children(":first");
                
    $(this).toggleClass('active');
                
    $otherElement.toggleClass('disabled', !act);
                

                
    var len1 = $('.numChoice.first-row .active').length;
                
    var len2 = $('.numChoice.second-row .active').length;
                
    console.log('selection1: ' + len1, 'selection2: ' + len2);
                

                
});

                .numChoice {
                
  display: block;
                
}
                

                
.num {
                
  width: 20px;
                
  height: 20px;
                
  background-color: #DDD;
                
  text-align: center;
                
  float: left;
                
  cursor: pointer;
                
}
                

                
.num.active {
                
  color: green;
                
}
                

                
.num.disabled {
                
  color: red;
                
}

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                
<div class="container">
                
  <div class="numChoice first-row">
                
    <div class="col-md-5ths">
                
      <div class="num">1</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">2</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">3</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">4</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">5</div>
                
    </div>
                
  </div>
                
  <br><br>
                
  <div class="numChoice second-row">
                
    <div class="col-md-5ths">
                
      <div class="num">1</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">2</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">3</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">4</div>
                
    </div>
                
    <div class="col-md-5ths">
                
      <div class="num">5</div>
                
    </div>
                
  </div>
                
</div>






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 16 '18 at 4:48









                Alon ShmielAlon Shmiel

                1,1861667113




                1,1861667113

























                    1














                    I've rewritten your JS part a bit. Please check if it's what you're looking for.






                    $('.numChoice .num').on("click", function() {
                    
    if ($(this).hasClass('disabled')){
                    
      return false; // let's skip disabled items?
                    
    }
                    
    var idx = $(this).parent().index();
                    
    $(this).toggleClass('active');
                    
    var act = $(this).is(".active");
                    
    const $others = $(this).closest(".numChoice").siblings();
                    
    $others.each(function(){
                    
      const $opposite = $(this).find('.num').eq(idx);
                    
      $opposite.removeClass('active').toggleClass('disabled', act);
                    
    });
                    
    updateCounts();
                    

                    
});
                    

                    
function updateCounts(){
                    
  const len1 = $('.first-row .active').length;
                    
  const len2 = $('.second-row .active').length;
                    
  console.clear();
                    
  console.log('selection1: ' + len1, 'selection2: ' + len2);
                    
}

                    .numChoice {
                    
  display: block;
                    
}
                    

                    
.num {
                    
  width: 20px;
                    
  height: 20px;
                    
  background-color: #DDD;
                    
  text-align: center;
                    
  float: left;
                    
  cursor: pointer;
                    
}
                    

                    
.num.active {
                    
  color: green;
                    
}
                    

                    
.num.disabled {
                    
  color: red;
                    
}

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    
<div class="container">
                    
  <div class="numChoice first-row">
                    
    <div class="col-md-5ths">
                    
      <div class="num">1</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">2</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">3</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">4</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">5</div>
                    
    </div>
                    
  </div>
                    
  <br><br>
                    
  <div class="numChoice second-row">
                    
    <div class="col-md-5ths">
                    
      <div class="num">1</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">2</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">3</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">4</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">5</div>
                    
    </div>
                    
  </div>
                    
</div>








                    share|improve this answer
























                    • ohhh.. I thought my answer was correct ) okay

                      – Roman86
                      Nov 16 '18 at 5:53











                    • you're answer is correct, I can't two accept two answers

                      – user123
                      Nov 16 '18 at 6:03
















                    1














                    I've rewritten your JS part a bit. Please check if it's what you're looking for.






                    $('.numChoice .num').on("click", function() {
                    
    if ($(this).hasClass('disabled')){
                    
      return false; // let's skip disabled items?
                    
    }
                    
    var idx = $(this).parent().index();
                    
    $(this).toggleClass('active');
                    
    var act = $(this).is(".active");
                    
    const $others = $(this).closest(".numChoice").siblings();
                    
    $others.each(function(){
                    
      const $opposite = $(this).find('.num').eq(idx);
                    
      $opposite.removeClass('active').toggleClass('disabled', act);
                    
    });
                    
    updateCounts();
                    

                    
});
                    

                    
function updateCounts(){
                    
  const len1 = $('.first-row .active').length;
                    
  const len2 = $('.second-row .active').length;
                    
  console.clear();
                    
  console.log('selection1: ' + len1, 'selection2: ' + len2);
                    
}

                    .numChoice {
                    
  display: block;
                    
}
                    

                    
.num {
                    
  width: 20px;
                    
  height: 20px;
                    
  background-color: #DDD;
                    
  text-align: center;
                    
  float: left;
                    
  cursor: pointer;
                    
}
                    

                    
.num.active {
                    
  color: green;
                    
}
                    

                    
.num.disabled {
                    
  color: red;
                    
}

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    
<div class="container">
                    
  <div class="numChoice first-row">
                    
    <div class="col-md-5ths">
                    
      <div class="num">1</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">2</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">3</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">4</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">5</div>
                    
    </div>
                    
  </div>
                    
  <br><br>
                    
  <div class="numChoice second-row">
                    
    <div class="col-md-5ths">
                    
      <div class="num">1</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">2</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">3</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">4</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">5</div>
                    
    </div>
                    
  </div>
                    
</div>








                    share|improve this answer
























                    • ohhh.. I thought my answer was correct ) okay

                      – Roman86
                      Nov 16 '18 at 5:53











                    • you're answer is correct, I can't two accept two answers

                      – user123
                      Nov 16 '18 at 6:03














                    1












                    1








                    1







                    I've rewritten your JS part a bit. Please check if it's what you're looking for.






                    $('.numChoice .num').on("click", function() {
                    
    if ($(this).hasClass('disabled')){
                    
      return false; // let's skip disabled items?
                    
    }
                    
    var idx = $(this).parent().index();
                    
    $(this).toggleClass('active');
                    
    var act = $(this).is(".active");
                    
    const $others = $(this).closest(".numChoice").siblings();
                    
    $others.each(function(){
                    
      const $opposite = $(this).find('.num').eq(idx);
                    
      $opposite.removeClass('active').toggleClass('disabled', act);
                    
    });
                    
    updateCounts();
                    

                    
});
                    

                    
function updateCounts(){
                    
  const len1 = $('.first-row .active').length;
                    
  const len2 = $('.second-row .active').length;
                    
  console.clear();
                    
  console.log('selection1: ' + len1, 'selection2: ' + len2);
                    
}

                    .numChoice {
                    
  display: block;
                    
}
                    

                    
.num {
                    
  width: 20px;
                    
  height: 20px;
                    
  background-color: #DDD;
                    
  text-align: center;
                    
  float: left;
                    
  cursor: pointer;
                    
}
                    

                    
.num.active {
                    
  color: green;
                    
}
                    

                    
.num.disabled {
                    
  color: red;
                    
}

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    
<div class="container">
                    
  <div class="numChoice first-row">
                    
    <div class="col-md-5ths">
                    
      <div class="num">1</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">2</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">3</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">4</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">5</div>
                    
    </div>
                    
  </div>
                    
  <br><br>
                    
  <div class="numChoice second-row">
                    
    <div class="col-md-5ths">
                    
      <div class="num">1</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">2</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">3</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">4</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">5</div>
                    
    </div>
                    
  </div>
                    
</div>








                    share|improve this answer













                    I've rewritten your JS part a bit. Please check if it's what you're looking for.






                    $('.numChoice .num').on("click", function() {
                    
    if ($(this).hasClass('disabled')){
                    
      return false; // let's skip disabled items?
                    
    }
                    
    var idx = $(this).parent().index();
                    
    $(this).toggleClass('active');
                    
    var act = $(this).is(".active");
                    
    const $others = $(this).closest(".numChoice").siblings();
                    
    $others.each(function(){
                    
      const $opposite = $(this).find('.num').eq(idx);
                    
      $opposite.removeClass('active').toggleClass('disabled', act);
                    
    });
                    
    updateCounts();
                    

                    
});
                    

                    
function updateCounts(){
                    
  const len1 = $('.first-row .active').length;
                    
  const len2 = $('.second-row .active').length;
                    
  console.clear();
                    
  console.log('selection1: ' + len1, 'selection2: ' + len2);
                    
}

                    .numChoice {
                    
  display: block;
                    
}
                    

                    
.num {
                    
  width: 20px;
                    
  height: 20px;
                    
  background-color: #DDD;
                    
  text-align: center;
                    
  float: left;
                    
  cursor: pointer;
                    
}
                    

                    
.num.active {
                    
  color: green;
                    
}
                    

                    
.num.disabled {
                    
  color: red;
                    
}

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    
<div class="container">
                    
  <div class="numChoice first-row">
                    
    <div class="col-md-5ths">
                    
      <div class="num">1</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">2</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">3</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">4</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">5</div>
                    
    </div>
                    
  </div>
                    
  <br><br>
                    
  <div class="numChoice second-row">
                    
    <div class="col-md-5ths">
                    
      <div class="num">1</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">2</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">3</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">4</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">5</div>
                    
    </div>
                    
  </div>
                    
</div>








                    $('.numChoice .num').on("click", function() {
                    
    if ($(this).hasClass('disabled')){
                    
      return false; // let's skip disabled items?
                    
    }
                    
    var idx = $(this).parent().index();
                    
    $(this).toggleClass('active');
                    
    var act = $(this).is(".active");
                    
    const $others = $(this).closest(".numChoice").siblings();
                    
    $others.each(function(){
                    
      const $opposite = $(this).find('.num').eq(idx);
                    
      $opposite.removeClass('active').toggleClass('disabled', act);
                    
    });
                    
    updateCounts();
                    

                    
});
                    

                    
function updateCounts(){
                    
  const len1 = $('.first-row .active').length;
                    
  const len2 = $('.second-row .active').length;
                    
  console.clear();
                    
  console.log('selection1: ' + len1, 'selection2: ' + len2);
                    
}

                    .numChoice {
                    
  display: block;
                    
}
                    

                    
.num {
                    
  width: 20px;
                    
  height: 20px;
                    
  background-color: #DDD;
                    
  text-align: center;
                    
  float: left;
                    
  cursor: pointer;
                    
}
                    

                    
.num.active {
                    
  color: green;
                    
}
                    

                    
.num.disabled {
                    
  color: red;
                    
}

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    
<div class="container">
                    
  <div class="numChoice first-row">
                    
    <div class="col-md-5ths">
                    
      <div class="num">1</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">2</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">3</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">4</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">5</div>
                    
    </div>
                    
  </div>
                    
  <br><br>
                    
  <div class="numChoice second-row">
                    
    <div class="col-md-5ths">
                    
      <div class="num">1</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">2</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">3</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">4</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">5</div>
                    
    </div>
                    
  </div>
                    
</div>





                    $('.numChoice .num').on("click", function() {
                    
    if ($(this).hasClass('disabled')){
                    
      return false; // let's skip disabled items?
                    
    }
                    
    var idx = $(this).parent().index();
                    
    $(this).toggleClass('active');
                    
    var act = $(this).is(".active");
                    
    const $others = $(this).closest(".numChoice").siblings();
                    
    $others.each(function(){
                    
      const $opposite = $(this).find('.num').eq(idx);
                    
      $opposite.removeClass('active').toggleClass('disabled', act);
                    
    });
                    
    updateCounts();
                    

                    
});
                    

                    
function updateCounts(){
                    
  const len1 = $('.first-row .active').length;
                    
  const len2 = $('.second-row .active').length;
                    
  console.clear();
                    
  console.log('selection1: ' + len1, 'selection2: ' + len2);
                    
}

                    .numChoice {
                    
  display: block;
                    
}
                    

                    
.num {
                    
  width: 20px;
                    
  height: 20px;
                    
  background-color: #DDD;
                    
  text-align: center;
                    
  float: left;
                    
  cursor: pointer;
                    
}
                    

                    
.num.active {
                    
  color: green;
                    
}
                    

                    
.num.disabled {
                    
  color: red;
                    
}

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    
<div class="container">
                    
  <div class="numChoice first-row">
                    
    <div class="col-md-5ths">
                    
      <div class="num">1</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">2</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">3</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">4</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">5</div>
                    
    </div>
                    
  </div>
                    
  <br><br>
                    
  <div class="numChoice second-row">
                    
    <div class="col-md-5ths">
                    
      <div class="num">1</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">2</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">3</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">4</div>
                    
    </div>
                    
    <div class="col-md-5ths">
                    
      <div class="num">5</div>
                    
    </div>
                    
  </div>
                    
</div>






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 16 '18 at 4:54









                    Roman86Roman86

                    846610




                    846610













                    • ohhh.. I thought my answer was correct ) okay

                      – Roman86
                      Nov 16 '18 at 5:53











                    • you're answer is correct, I can't two accept two answers

                      – user123
                      Nov 16 '18 at 6:03



















                    • ohhh.. I thought my answer was correct ) okay

                      – Roman86
                      Nov 16 '18 at 5:53











                    • you're answer is correct, I can't two accept two answers

                      – user123
                      Nov 16 '18 at 6:03

















                    ohhh.. I thought my answer was correct ) okay

                    – Roman86
                    Nov 16 '18 at 5:53





                    ohhh.. I thought my answer was correct ) okay

                    – Roman86
                    Nov 16 '18 at 5:53













                    you're answer is correct, I can't two accept two answers

                    – user123
                    Nov 16 '18 at 6:03





                    you're answer is correct, I can't two accept two answers

                    – user123
                    Nov 16 '18 at 6:03


















                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53331534%2fcount-the-active-classes-on-both-choices%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    Popular posts from this blog

                    List item for chat from Array inside array React Native

                    Image
                    0 This is my code for Chat Box, the window where I have "In" and "Out" messages are appearing. import React, { Component } from "react"; import { StyleSheet, Text, View, TouchableOpacity, TextInput, FlatList, Platform, AsyncStorage } from "react-native"; import Tutor from "../image/krutika.jpg"; import { Container, Header, Left, Input, Body, Right, Thumbnail, Button } from "native-base"; import FontAwesome from "react-native-vector-icons/FontAwesome"; import Ionicons from "react-native-vector-icons/Ionicons"; import Icon1 from "react-native-vector-icons/FontAwesome"; import axios from "axios"; export default class ChatBox extends Component { st...
                    Read more

                    Thiostrepton

                    Image
                    Thiostrepton [1] Names Other names Alaninamide, Bryamycin, Thiactin Identifiers CAS Number 1393-48-2   Y 3D model (JSmol) Interactive image ChEMBL ChEMBL468719   N ECHA InfoCard 100.014.304 PubChem CID 16130278 InChI InChI=1S/C72H85N19O18S5/c1-14-26(3)47-63(105)78-30(7)57(99)75-28(5)56(98)76-31(8)58(100)91-72-19-18-40(66-85-43(22-111-66)59(101)77-29(6)55(97)74-27(4)54(73)96)81-52(72)42-21-112-67(83-42)49(34(11)109-69(107)41-20-37(32(9)92)36-16-17-39(79-47)51(95)50(36)80-41)89-60(102)44-24-113-68(86-44)53(71(13,108)35(12)94)90-62(104)45-23-110-65(84-45)38(15-2)82-64(106)48(33(10)93)88-61(103)46-25-114-70(72)87-46/h15-17,20-22,24-26,30-35,39,45,47-49,51-53,79,92-95,108H,4-6,14,18-19,23H2,1-3,7-13H3,(H2,73,96)(H,74,97)(H,75,99)(H,76,98)(H,77,101)(H,78,105)(H,82,106)(H,88,103)(H,89,102)(H,90,104)(H,91,100)/b38-15-/t26-,30-,31-,32-,33+,34+,35+,39+,45+,47-,48-,49-,51-,52+,53+,71+,72+/m0/s1 Key: NSFFHOGKXHRQEW-AIHSUZKVSA-N ...
                    Read more

                    Caerphilly

                    Image
                    This article is about the town of Caerphilly. For the cheese of the same name, see Caerphilly cheese. For other uses, see Caerphilly (disambiguation). Caerphilly Welsh: Caerffili Caerphilly Castle Caerphilly Location within Caerphilly Population 30,388  OS grid reference ST1586 Principal area Caerphilly Ceremonial county Gwent Country Wales Sovereign state United Kingdom Post town CAERPHILLY Postcode district CF83 Dialling code 029 Police Gwent Fire South Wales Ambulance Welsh EU Parliament Wales UK Parliament Caerphilly Welsh Assembly Caerphilly List of places UK Wales Caerphilly 51°34′41″N 3°13′05″W  /  51.578°N 3.218°W  / 51.578; -3.218 Coordinates: 51°34′41″N 3°13′05″W  /  51.578°N 3.218°W  / 51.578; -3.218 Caerphilly ( / k aɪər ˈ f ɪ l i / ; Welsh: Caerffili , Welsh pronunciation:  [ˌkɑːɨrˈfɪlɪ] ) is a town and community in South Wales, at the southern end of the Rhymney Valley....
                    Read more