title: How to check all elements in row/column clicked, Bingo game
body: <h1>Problem</h1>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/onlyandrewn/b18b4bza/" rel="nofollow">http://jsfiddle.net/onlyandrewn/b18b4bza/</a></p>
  
  <p>I'm making a bingo card and currently it keeps a count of every time a square has been clicked. However, I'm lost on how to make it so that when five squares in a row, column or on a diagonal are clicked for a Bingo, it knows that it's a win as opposed to any random five squares on the card.</p>
  
  <p>Would I have to give each square on the card an #id and then have arrays that say if squares 1,2,3,4,5 have been clicked = a Bingo?</p>
  
  <h2>index.html</h2>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" class="no-js"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Election Bingo&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="assets/css/style.css"&gt;
      &lt;!-- &lt;link rel="icon" type="image/png" href="assets/img/favicon.ico"&gt; --&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;Political Zinger&lt;/h1&gt;
  &lt;button class="print"&gt;Print&lt;/button&gt;
  &lt;button class="again"&gt;Play again&lt;/button&gt;
  
  &lt;div class="congrats"&gt;
      &lt;p&gt;WINNER!&lt;/p&gt;
  &lt;/div&gt;&lt;!-- /.congrats --&gt;
  
  &lt;div class="bingo"&gt;
      &lt;div class="row"&gt;
          &lt;div class="square"&gt;&lt;p&gt;Chrissy Teigen cries&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;Host makes a quick change&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;'I love you!'&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;'Merci' or 'Gracias'&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;Attempt at re-creating the 'Ellen selfie'&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="square"&gt;&lt;p&gt;A Weinstein is thanked&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;Jennifer Lawrence trips&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;Half-joking mention of nominee diversity&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;'This is heavy!'&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;A shout-out for winner's kids (who should be sleeping)&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="square"&gt;&lt;p&gt;Joke about number of British nominees&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;Award accepted posthumously&lt;/p&gt;&lt;/div&gt;
          &lt;div class="logo"&gt;&lt;p&gt;Logo&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;Joke about the Sony hack&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;Winner mentions fellow nominees&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="square"&gt;&lt;p&gt;'I'd like to thank the academy ...'&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;'Je Suis Charlie'&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;The show goes over three hours&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;Camera pans to George and Amal&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;Winner talks over orchestra&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="square"&gt;&lt;p&gt;Winner thanks agent or manager&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;Winner forgets to thank spouse&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;Host makes a borderline-offensive joke&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;Presenters have a scripted 'disagreement'&lt;/p&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;p&gt;NPH performs a music number&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /.bingo --&gt;
  
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"&gt;&lt;/script&gt;
      &lt;script src="assets/js/scripts.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>scripts.js</h2>
  
  <pre><code>$(function() {
      // Play again, removes all previously clicked
      $('.again').click(function(){
          $('.square').removeClass('clicked');
      });
  
      // var newNum = Math.floor(Math.random);
  
      // Toggle clicked and not clicked
      $('.square').click(function(){
          $(this).toggleClass('clicked');
      });
  
      // Count the number of squares clicked
      $('.square').data('clicked', 0)
          .click(function(){
              var counter = $(this).data('clicked');
              $(this).data('clicked', counter ++);
              console.log(counter);
          })
  });
  </code></pre>