title: Add <th> text on the each <td> - jquery
body: <p>I want to show my tabular data into different rows in mobile layout. So what i am trying to do is to add  values in each :before pseudo-selector. so it should display like that.</p>
  
  <p>Name: xyz</p>
  
  <p>Age:  20</p>
  
  <p>Name: abc</p>
  
  <p>Age:  30</p>
  
  <p>Please see my JQuery code here. It is working fine if there is only one  but if there are multiple  then it doesn't work</p>
  
  <p>JQuery:</p>
  
  <pre><code>if ($('table').length) {
      var th_data;
      $('table th').each(function (index) {
          var index_th = index;
          th_data = $(this).text();
          $('table td').each(function (index) {
              var index_td = index;
              if (index_th == index_td) {
                  $(this).attr('data-content', th_data);
              }
          });
      });
  }
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>table th{display:none;}
  table td:before{content:attr(data-content) '';position:absolute;top:6px;left:6px;width:45%;padding-right:10px;white-space:nowrap;}
  table td{position:relative;padding-left:50%;display:block;}
  </code></pre>
  
  <p>Solution:</p>
  
  <p>I think I have figured it out. so the updated JQuery code is this. And it is working fine on multiple </p>
  
  <pre><code> /* Changing the tabular data into rows */
  if ($('table').length) {
      var th_data;
      $('table').each(function () {
          var _table = $(this);
          $(this).find('th').each(function (index) {
              var index_th = index;
              th_data = $(this).text();
              _table.find('tr').each(function () {
                  $(this).find('td').each(function (index) {
                      var index_td = index;
                      if (index_th == index_td) {
                          $(this).attr('data-content', th_data);
                      }
                  });
              });
          });
      });
  }
  </code></pre>