title: I want to click on a square to fly a message that displays the number that is within each square with jquery
body: <h2>JQUERY</h2>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function(){
      $("div").click(function(){
          var pars = $("p");
          for( i=0; i&lt;pars.length; i++ ) {
          alert("Found paragraph: " + pars[i].innerHTML);
      });
  });
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre class="lang-css prettyprint-override"><code>.container {
       padding:10%
  }
  
  [class*="col-"] &gt; div {
       background:white;height:200px;width:200px;
       padding:20px;
       margin:13%;
   }
  
  .value {
       position: absolute;
       top: 90px;
       left: 130px;
  } 
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="col-md-4  col-sm-5"&gt;
  &lt;div style="background-color:pink"&gt;&lt;h1 id="test" class="value"&gt;1&lt;/h1&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-md-4 col-sm-5"&gt;
  &lt;div style="background-color:pink" &gt;&lt;h1 id="test" class="value"&gt;2&lt;/h1&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div  class="col-md-4 col-sm-5"&gt;
  &lt;div style="background-color:yellow" &gt;&lt;h1 id="test" class="value"&gt;3&lt;/h1&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-md-4  col-sm-5"&gt;
  &lt;div style="background-color:yellow"&gt;&lt;h1 id="test" class="value"&gt;4&lt;/h1&gt;&lt;/div&gt;
  &lt;/div&gt;  
  
  &lt;div class="col-md-4 col-sm-5"&gt;
  &lt;div style="background-color:blue"&gt;&lt;h1 id="test" class="value"&gt;5&lt;/h1&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-md-4  col-sm-5"&gt;
  &lt;div style="background-color:blue" &gt;&lt;h1 id="test" class="value"&gt;6&lt;/h1&gt;&lt;/div&gt;
  &lt;/div&gt;  `
  </code></pre>
  
  <p>Every time I click a box I want to display an alert with the number that is within the box.</p>
  
  <p>How can I solve this problem?</p>