title: Add text to input only if div has class `is-active`
body: <h1>Problem</h1>
  
  <ul>
  <li>Players that have not been selected, ie. do not have a class of <code>picked.is-active</code> should not be added to any of the input fields when they are clicked on</li>
  <li>The maximum number of players that be be picked from each category is 2 out of 4 goalies, 6 of 15 defencemen and 12 out of 31 forwards.</li>
  </ul>
  
  <h2>Update #3</h2>
  
  <p>Added link to the Github repo here: <a href="https://github.com/onlyandrewn/wheatkings" rel="nofollow">https://github.com/onlyandrewn/wheatkings</a></p>
  
  <h2>Update #2</h2>
  
  <p>Added the snippet, which shows how the <code>is-inactive</code> and the <code>is-active</code> classes are being toggled.</p>
  
  <h2>Update #1 -</h2>
  
  <p><strong>I've removed the second snippet which may be causing some confusion</strong></p>
  
  <p>This Javascript snippet below grabs the name of the player clicked and then puts it into an input field, if it has a class of <code>picked.is-active</code>. However, let's say you've selected two goalies already, but then click on the two remaining goalies in that category when are unselected (have the default class <code>in-active</code>) <strong>those unselected players still get added to the inputs, which is not what we want.</strong></p>
  
  <hr>
  
  <h2>scripts.js - This snippet, which needs fixing, currently adds player name to input field even if max number players in specific category has been reached</h2>
  
  <pre><code>$(".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("");
      }
  });
  </code></pre>
  
  <h2>scripts.js (How <code>is-inactive</code> and <code>is-active</code> classes are toggled)</h2>
  
  <pre><code>$(".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 the class `is-active` based on the 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 one based on zero-indexing
        player.eq(player_index).find(".is-inactive").removeClass("is-inactive").addClass("is-active");
    });
  });
  
  function getRandomNumbers(start, end, howMany) {
      var arr = [];
      for (var i = start, j = 0; i &lt;= end; j++, i++)
          arr[j] = i
      arr.sort(function() {
          return Math.floor((Math.random() * 3) - 1)
      });
  
      return arr.splice(0, howMany)
  }
  </code></pre>
  
  <h2>index.html (Form snippet)</h2>
  
  <pre><code>    &lt;form id="form"&gt;
          &lt;input type="text" name="p1"  id="p1"&gt;
          &lt;input type="text" name="p2"  id="p2"&gt;
          &lt;input type="text" name="p3"  id="p3"&gt;
          &lt;input type="text" name="p4"  id="p4"&gt;
          &lt;input type="text" name="p5"  id="p5"&gt;
          &lt;input type="text" name="p6"  id="p6"&gt;
          &lt;input type="text" name="p7"  id="p7"&gt;
          &lt;input type="text" name="p8"  id="p8"&gt;
          &lt;input type="text" name="p9"  id="p9"&gt;
          &lt;input type="text" name="p10" id="p10"&gt;
          &lt;input type="text" name="p11" id="p11"&gt;
          &lt;input type="text" name="p12" id="p12"&gt;
          &lt;input type="text" name="p13" id="p13"&gt;
          &lt;input type="text" name="p14" id="p14"&gt;
          &lt;input type="text" name="p15" id="p15"&gt;
          &lt;input type="text" name="p16" id="p16"&gt;
          &lt;input type="text" name="p17" id="p17"&gt;
          &lt;input type="text" name="p18" id="p18"&gt;
          &lt;input type="text" name="p19" id="p19"&gt;
          &lt;input type="text" name="p20" id="p20"&gt;
  
          &lt;button class="btn btn--submit" type="submit"&gt;&lt;img src="src/img/ballot-alt.png" class="image--ballot"&gt;Submit Vote&lt;/button&gt;
      &lt;/form&gt;
  </code></pre>
  
  <h2>index.html (Player snippet)</h2>
  
  <pre><code>        &lt;div class="player player--forward year--2000 year--2010"&gt;
              &lt;div class="tooltip"&gt;
                  &lt;p class="tooltip__name"&gt;Mark Stone&lt;/p&gt;
                  &lt;p class="tooltip__hometown"&gt;&lt;span&gt;Hometown:&lt;/span&gt; Winnipeg, Man.&lt;/p&gt;
                  &lt;p class="tooltip__years"&gt;&lt;span&gt;Years Played:&lt;/span&gt; 2008-2012&lt;/p&gt;
                  &lt;div class="tooltip__stats--inline"&gt;
  
                      &lt;div class="stats__group stats--games"&gt;
                          &lt;p class="stats__header"&gt;GP&lt;/p&gt;
                          &lt;p class="stats__number stats__number--games"&gt;232&lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;div class="stats__group stats--goals"&gt;
                          &lt;p class="stats__header"&gt;G&lt;/p&gt;
                          &lt;p class="stats__number stats__number--goals"&gt;106&lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;div class="stats__group stats--assists"&gt;
                          &lt;p class="stats__header"&gt;A&lt;/p&gt;
                          &lt;p class="stats__number stats__number--assists"&gt;190&lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;div class="stats__group stats--points"&gt;
                          &lt;p class="stats__header"&gt;Pts&lt;/p&gt;
                          &lt;p class="stats__number stats__number--points"&gt;296&lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;div class="stats__group stats--penalties"&gt;
                          &lt;p class="stats__header"&gt;Pim&lt;/p&gt;
                          &lt;p class="stats__number stats__number--penalties"&gt;102&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="player__headshot player--mstone"&gt;
                  &lt;div class="picked is-inactive"&gt;&lt;i class="fa fa-star" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;p class="player__name"&gt;Mark Stone&lt;/p&gt;
              &lt;p class="player__position"&gt;Forward&lt;/p&gt;
          &lt;/div&gt;
  </code></pre>