title: Looping through div rows and collecting the id of the row and column values
body: <p>I have divs acting like a table and I want to loop through each div row in jquery and collect the column values (and also the row id)</p>
  
  <p>How can I do it? code is in this jsffiddle</p>
  
  <p><a href="https://jsfiddle.net/DTcHh/24064/" rel="nofollow">https://jsfiddle.net/DTcHh/24064/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="tasksTableDiv"&gt;
                              &lt;div class="row taskRow" id="1"&gt;
                                  &lt;div id="description_1"
                                      class="col-sm-2 taskDescriptionCol"&gt;Description 1
                   &lt;/div&gt;
                   &lt;div id="colour_1"
                                      class="col-sm-2 taskColourCol"&gt;Blue
                   &lt;/div&gt;
                              &lt;/div&gt;
                &lt;div class="row taskRow" id="2"&gt;
                                  &lt;div id="description_2"
                                      class="col-sm-2 taskDescriptionCol"&gt;Description 2
                   &lt;/div&gt;
                   &lt;div id="colour_1"
                                      class="col-sm-2 taskColourCol"&gt;Red
                   &lt;/div&gt;
                              &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;button id="loopButton" type="button"
                              class="btn btn-sm btn-primary"&gt;Loop&lt;/button&gt;              
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>  $('#loopButton').on('click',function() {
          var ids = [];
          var row = $('.taskRow');
          $.each( row, function() {
           // get the id of each row and get the description and colour
           // ids.push( push the id you got);
                  console.log("in loop" + row.html());
              });
    });
  </code></pre>