javascript - Add text to input only if div has class `is-active` -

problem

• players have not been selected, ie. not have class of picked.is-active should not added of input fields when clicked on
• the maximum number of players be picked each category 2 out of 4 goalies, 6 of 15 defencemen , 12 out of 31 forwards.

update #3

added link github repo here: https://github.com/onlyandrewn/wheatkings

update #2

added snippet, shows how is-inactive , is-active classes being toggled.

update #1 -

i've removed second snippet may causing confusion

this javascript snippet below grabs name of player clicked , puts input field, if has class of picked.is-active. however, let's you've selected 2 goalies already, click on 2 remaining goalies in category when unselected (have default class in-active) those unselected players still added inputs, not want.

---

scripts.js - snippet, needs fixing, adds player name input field if max number players in specific category has been reached

$(".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("");     } }); 

scripts.js (how is-inactive , is-active classes toggled)

$(".btn--random").on("click", function() {      // check these numbers     var goalies_array = getrandomnumbers(1, 4, 2);     var defensemen_array = getrandomnumbers(5, 19, 6);     var forwards_array = getrandomnumbers(20, 50, 12);      $(".goalies").text(goalies_array.join(","));     $(".defensemen").text(defensemen_array.join(","));     $(".forwards").text(forwards_array.join(","));      var players_array = goalies_array.concat(defensemen_array).concat(forwards_array);      // add class `is-active` based on numbers generated     var player = $(".player");     $(".is-active").removeclass("is-active").addclass("is-inactive");       $.each(players_array, function(index, value) {       var player_index = value - 1; // subtract 1 based on zero-indexing       player.eq(player_index).find(".is-inactive").removeclass("is-inactive").addclass("is-active");   }); });  function getrandomnumbers(start, end, howmany) {     var arr = [];     (var = start, j = 0; <= end; j++, i++)         arr[j] =     arr.sort(function() {         return math.floor((math.random() * 3) - 1)     });      return arr.splice(0, howmany) } 

index.html (form snippet)

    <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> 

index.html (player snippet)

        <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> 

storing app state dom/html element not way implement business. should have used data objects hold app states. following enforce max count constraint each category, assuming player names unique.

(function () {     var maxcounts = {         forward: 12,         defenceman: 6,         goalie: 2     };      var getselecteplayernames = function () {         var names = [];         $("input:text").each(function (i, t) {             t.value && names.push(t.value);         });          return names;     };     var getplayerpositioncounts = function (players) {         var $players = $('.player');         var positions = [];         $.each(players, function (i, player) {             positions.push($players.find(".player__name:contains('" + player + "')").next().text().tolowercase());         });          return positions.reduce(function (memo, val) {             memo[val]++;             return memo;         }, { forward: 0, defenceman: 0, goalie: 0 });     };      $(".player").on("click", function () {         var $el = $(this);          var playername = $el.find(".player__name").text();         var selectedplayernames = getselecteplayernames();         var index = selectedplayernames.indexof(playername);         if (index > -1) {             $("input:text:eq(" + index + ")").val("");              return;         }          if (!$el.find(".picked.is-active").length) {             return;         }          var playerposition = $el.find(".player__position").text().tolowercase();         var selectedpositioncounts = getplayerpositioncounts(selectedplayernames);         if (selectedpositioncounts[playerposition] < maxcounts[playerposition]) {             $("input:text:eq(" + selectedplayernames.length + ")").val(playername);         }     }); })();