title: Loop echo CSS class by PHP
body: <p><strong>CSS</strong></p>
  
  <pre><code>.number{
    float:none;
    background-color:white;
    cursor:ponter;
  }
  #panel{
    background-color:red;
    height:200px;
    width:100px;
    overflow-y:scroll;
  }
  </code></pre>
  
  <p>I want to make a list of number in a panel. I've tried with HTML</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="panel&gt;
    &lt;span class="number"&gt;1&lt;/span&gt;
    &lt;span class="number"&gt;2&lt;/span&gt;
    &lt;span class="number"&gt;3&lt;/span&gt;
    &lt;span class="number"&gt;4&lt;/span&gt;
    .....
    &lt;span class="number"&gt;50&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When <code>&lt;span&gt;</code> is clicked, something will appear by jQuery, but I have no problem with jQuery.</p>
  
  <p>Because I thought that looping the number manually doesn't efficient, I tried to use PHP.</p>
  
  <p><strong>PHP</strong></p>
  
  <pre><code>&lt;?php
  for($number=0;$number&lt;=50;$number++){
    echo "&lt;span class='number'&gt;".$number."&lt;/span&gt;";
  }
  ?&gt;
  </code></pre>
  
  <p>But the number made by PHP doesnt do the same like HTML does.</p>
  
  <p>This is what I want and done by HTML.</p>
  
  <p><a href="https://i.stack.imgur.com/vGuiD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vGuiD.jpg" alt="This is what I want and done by HTML."></a></p>
  
  <p>This is done with PHP and the numbers are made horizontally until 50</p>
  
  <p><a href="https://i.stack.imgur.com/AK1zP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AK1zP.jpg" alt="This is done with PHP and the numbers are made horizontally until 50"></a></p>