title: How do I change class name for CSS inside a PHP Loop?
body: <p>Hello I am trying to change CSS content on some DIVs depending of their class name.</p>
  
  <p>To explain better, I have a while loop in PHP reading from the database to output DIVs and I have a field named "section" with data such as A,B,C,D,E,F,G.</p>
  
  <p>For the DIVs located in section "A"  and "B" I want  the class name to be desk_box_hor (for horizontal) ELSE I want it to desk_box_ver(vertical). </p>
  
  <p>Below is what I tried doing only two sections (A,B) that need to be vertical. The others need to be horizontal. If theres a more efficient way of doing this please tell me. I have about 200 of these DIVs being output on screen. </p>
  
  <p>If you have a better title please recommend one, I didn't know what to put lol.</p>
  
  <p>Thanks in advance!</p>
  
  <p><a href="http://jsfiddle.net/mw62w5yz/4/" rel="nofollow">My fiddle of what I want both DIVs to look like</a></p>
  
  <p><strong>PHP:</strong></p>
  
  <pre><code>while($row = mysqli_fetch_assoc($desk_coord_result)){   
                          //naming X,Y values
                          $id    = $row['coordinate_id'];
                          $x_pos = $row['x_coord'];
                          $y_pos = $row['y_coord'];
                          $sec_name = $row['section_name'];
                          //draw a DIV box at its X,Y coordinate   
      //if section A and B do vertical                    
      if($sec_name == 'B' || $sec_name == 'A'){
          echo '&lt;div class="desk_box_ver" data="'.$id.'" style="position:absolute;left:'.$x_pos.'px;top:'.$y_pos.'px;"&gt;id:'.$id.'&lt;/div&gt;';
  
      }
  //else do it horizontal
      else{
          echo '&lt;div class="desk_box_hor" data="'.$id.'" style="position:absolute;left:'.$x_pos.'px;top:'.$y_pos.'px;"&gt;id:'.$id.'&lt;/div&gt;';
          }
      } //end while loop for desk_coord_result
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>/* desk boxes*/
  .desk_box_ver{ 
  width: 23px;
  height: 10px;
  border: 4px solid black; 
  padding:10px;
  }   
  
  .desk_box_hor{ 
  width: 10px;
  height: 23px;
  border: 4px solid black; 
  padding:10px;
  }   
  </code></pre>
  
  <p>Also, lets say I want to use these two classes in the same Jquery function, is this the proper way of doing it?</p>
  
  <pre><code>$(".desk_box").add(".desk_box_ver").click(function() {
  or
  $(".desk_box, .desk_box_ver").click(function() {
  </code></pre>