title: Separate divs by specific elements using javascript
body: <p>I have the following object:</p>
  
  <pre><code>var array = [
   { 
     id: 1,
     unit: '1A',
     division: 1
   },
    { 
     id: 2,
     unit: '2A',
     division: 1
   },
    { 
     id: 3,
     unit: '3A',
     division: 1
   },
    { 
     id: 4,
     unit: '4A',
     division: 1
   },
     { 
     id: 5,
     unit: '5A',
     division: 1
   },
    { 
     id: 6,
     unit: '6A',
     division: 1
   },
    { 
     id: 7,
     unit: '1A',
     division: 2
   },
    { 
     id: 8,
     unit: '1B',
     division: 2
   },
    { 
     id: 9,
     unit: '2A',
     division: 2
   },
    { 
     id: 10,
     unit: '2B',
     division: 2
   },
     { 
     id: 11,
     unit: '3A',
     division: 2
   },
    { 
     id: 12,
     unit: '3B',
     division: 2
   }
  ];
  </code></pre>
  
  <p>When drawing the <code>divs</code> I have the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.unit{
     float: left;
     border: 1px solid #000000;
     width: 49%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Division 1&lt;/div&gt;
  &lt;div class="unit"&gt;1A&lt;/div&gt;
  &lt;div class="unit"&gt;2A&lt;/div&gt;
  &lt;div class="unit"&gt;3A&lt;/div&gt;
  &lt;div class="unit"&gt;4A&lt;/div&gt;
  &lt;div class="unit"&gt;5A&lt;/div&gt;
  &lt;div class="unit"&gt;6A&lt;/div&gt;
  &lt;div&gt;Division 2&lt;/div&gt;
  &lt;div class="unit"&gt;1A&lt;/div&gt;
  &lt;div class="unit"&gt;1B&lt;/div&gt;
  &lt;div class="unit"&gt;2A&lt;/div&gt;
  &lt;div class="unit"&gt;2B&lt;/div&gt;
  &lt;div class="unit"&gt;3A&lt;/div&gt;
  &lt;div class="unit"&gt;3B&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I want it to be ordered as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.unit{
    float: left;
    width: 49%;
    border: 1px solid #000000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Division 1&lt;/div&gt;
  &lt;div class="unit"&gt;1A&lt;/div&gt;
  &lt;div class="unit"&gt;&amp;nbps;&lt;/div&gt;
  &lt;div class="unit"&gt;2A&lt;/div&gt;
  &lt;div class="unit"&gt;&amp;nbps;&lt;/div&gt;
  &lt;div class="unit"&gt;3A&lt;/div&gt;
  &lt;div class="unit"&gt;&amp;nbps;&lt;/div&gt;
  &lt;div class="unit"&gt;4A&lt;/div&gt;
  &lt;div class="unit"&gt;&amp;nbps;&lt;/div&gt;
  &lt;div class="unit"&gt;5A&lt;/div&gt;
  &lt;div class="unit"&gt;&amp;nbps;&lt;/div&gt;
  &lt;div class="unit"&gt;6A&lt;/div&gt;
  &lt;div class="unit"&gt;&amp;nbps;&lt;/div&gt;
  &lt;div&gt;Division 2&lt;/div&gt;
  &lt;div class="unit"&gt;1A&lt;/div&gt;
  &lt;div class="unit"&gt;1B&lt;/div&gt;
  &lt;div class="unit"&gt;2A&lt;/div&gt;
  &lt;div class="unit"&gt;2B&lt;/div&gt;
  &lt;div class="unit"&gt;3A&lt;/div&gt;
  &lt;div class="unit"&gt;3B&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So I want to organize all the variables that have the letter "A" on the left and the letters "B" on the right.</p>
  
  <p>I'm trying to do the following:</p>
  
  <pre><code>var division = [];
  var divs     = '';
  
  for(var i in array){
     division.push(array[i].division);
  }
  
  division = unique(division);
  
  for(var k in division){
    for(var j in array){
       if(division[k] == array[j].division){
          if(array[j].unit % 2 == 0){
             divs += '&lt;div class="unit"&gt;'+array[j].unit+'&lt;/div&gt;';
          }else{
             divs += '&lt;div class="unit"&gt;'+array[j].unit+'&lt;/div&gt;';
          }
       }
    }
  }
  </code></pre>
  
  <p>I hope that you can help me or give me and advice how can I do to solve my situation.</p>