javascript - Issues with if-statement adding players with `is-inactive` class to input -

problem

the maximum number of players each position is:

• 2 out of 4 goalies
• 6 out of 15 defencemen
• 12 out of 31 forwards

i've gotten point i'll click on hockey player , name gets added input field in form, if have 2 goalies selected, ie has class of is-active , click on 1 of other 2 unselected players default is-inactive class, name still added input when there should only 2 goalies max. , unfortunately, case defencemen , forwards too.

goal

when starredgoaltenders === maxgoaltenders or starreddefencemen === maxdefencemen or starredforwards === maxfowards names of players do not have not been selected of specific position , not have is-active class should not added input in form.

scripts.js

    function countselected() {         $(".player").on("click", function(){              // checks if maximum number of players have been selected             // if so, return false , nothing             // if not, class toggle `is-inactive` `is-active`             if ($(this).find(".picked.is-inactive.full").length > 0) return false;             $(this).find(".picked").toggleclass("is-inactive is-active");             $(".player").removeclass("not-picked");             $(".player").not(":has(.is-active)").addclass("not-picked");              // count number of players stars             var starredgoaltenders = $(".player--goalie").find(".picked.is-active").length;             var starreddefencemen = $(".player--defencemen").find(".picked.is-active").length;             var starredforwards = $(".player--forward").find(".picked.is-active").length;              console.log(starredgoaltenders, starreddefencemen, starredforwards);              // number of starred players each position cannot exceed following numbers             var maxgoaltenders = 2;             var maxdefencemen = 6;             var maxfowards = 12;              // if number of starred players hits max, class of `is-completed` adding corresponding checkmark indicate task has been completed             if (starredgoaltenders === maxgoaltenders) {                 $(".checkmark--goalie").addclass("is-completed");                 $(".player--goalie").find(".picked").addclass("full");             } else {                 $(".checkmark--goalie").removeclass("is-completed");                 $(".player--goalie").find(".picked.is-inactive").removeclass('full');             }              if (starreddefencemen === maxdefencemen) {                 $(".checkmark--defencemen").addclass("is-completed");                 $(".player--defencemen").find(".picked").addclass("full");             } else {                 $(".checkmark--defencemen").removeclass("is-completed");                 $(".player--defencemen").find(".picked.is-inactive").removeclass('full');             }              if (starredforwards === maxfowards) {                 $(".checkmark--forward").addclass("is-completed");                 $(".player--forward").find(".picked").addclass("full");             } else {                 $(".checkmark--forward").removeclass("is-completed");                 $(".player--forward").find(".picked.is-inactive").removeclass('full');             }              // if conditions met show submit vote button             if (starredgoaltenders === maxgoaltenders && starreddefencemen === maxdefencemen && starredforwards === maxfowards) {                 $(".btn--submit").show();                 $(".btn--submit").addclass("slideleft");             } else{                 $(".btn--submit").hide();                 $(".btn--submit").removeclass("slideleft");             }         }); } countselected();   // every time player clicked, note name of player $(".player").on("click", function(){     var playernames = [];     $("input:text").each(function(i, t) { playernames.push(t.value) });      if ($(this).find("picked.is-active")) {         var playername = $(this).find(".player__name").html();         var index = playernames.indexof(playername);          if (index == -1) // add player             $("input:text:eq(" + playernames.indexof("") + ")").val(playername);         else // remove player             $("input:text:eq(" + index + ")").val("");     } else {         $("input").val("");     } }); 

index.html - snippet includes form , 1 out of 60 available players clicked on

<form id="form">    <input type="text" name="p1"  id="p1">    <input type="text" name="p2"  id="p2">    <input type="text" name="p3"  id="p3">    <input type="text" name="p4"  id="p4">    <input type="text" name="p5"  id="p5">    <input type="text" name="p6"  id="p6">    <input type="text" name="p7"  id="p7">    <input type="text" name="p8"  id="p8">    <input type="text" name="p9"  id="p9">    <input type="text" name="p10" id="p10">    <input type="text" name="p11" id="p11">    <input type="text" name="p12" id="p12">    <input type="text" name="p13" id="p13">    <input type="text" name="p14" id="p14">    <input type="text" name="p15" id="p15">    <input type="text" name="p16" id="p16">    <input type="text" name="p17" id="p17">    <input type="text" name="p18" id="p18">    <input type="text" name="p19" id="p19">    <input type="text" name="p20" id="p20">    <button class="btn btn--submit" type="submit"><img src="src/img/ballot-alt.png" class="image--ballot">submit vote</button> </form> <div class="player player--forward year--2000 year--2010">    <div class="tooltip">       <p class="tooltip__name">mark stone</p>       <p class="tooltip__hometown"><span>hometown:</span> winnipeg, man.</p>       <p class="tooltip__years"><span>years played:</span> 2008-2012</p>       <div class="tooltip__stats--inline">          <div class="stats__group stats--games">             <p class="stats__header">gp</p>             <p class="stats__number stats__number--games">232</p>          </div>          <div class="stats__group stats--goals">             <p class="stats__header">g</p>             <p class="stats__number stats__number--goals">106</p>          </div>          <div class="stats__group stats--assists">             <p class="stats__header">a</p>             <p class="stats__number stats__number--assists">190</p>          </div>          <div class="stats__group stats--points">             <p class="stats__header">pts</p>             <p class="stats__number stats__number--points">296</p>          </div>          <div class="stats__group stats--penalties">             <p class="stats__header">pim</p>             <p class="stats__number stats__number--penalties">102</p>          </div>       </div>    </div>    <div class="player__headshot player--mstone">       <div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>    </div>    <p class="player__name">mark stone</p>    <p class="player__position">forward</p> </div> 

probably, easiest way approach problem repopulate inputs every time clicks on player, rather trying populate each input once. means can keep application state in simple, understood data structure independent of dom/ui, rather having consult dom each time new happens.

this how write it.

var players = [         {name: 'ovechkin', type: 'f'},         {name: 'dubnyk', type: 'g'}         // complete player list goes here     ],     selectedplayers: []; // these players user has chosen   var getcurrentplayercount = function (playertype) {     // return number of players selected of 1 type     return selectedplayers.reduce(function (count, player) {         if (player.type === playertype) return count + 1;         return count;     }, 0); }  var selectplayer = function (player) {     // call when clicks on player     var currentforwardcount = getcurrentplayercount('f')         currentdefencecount = getcurrentplayercount('d'),         currentgoaliecount = getcurrentplayercount('g');      // nothing (or show ui message) if goes on     // player-type limit     if (player.type === 'f' && currentforwardcount > 12) return;     if (player.type === 'd' && currentdefencecount > 6) return;     if (player.type === 'g' && currentgoaliecount > 2) return;      // if here, means player can added, add     // user's list     selectedplayers.push(player);      updateui(); } 

i'm not including updateui here. can work out on own.

if need support ie 8 or other browser not support array.prototype.reduce, need getcurrentplayercount differently.