Looping through multi tables in jQuery and adding data-labels to each td

I have this code that takes the th values and adds them to data-label's for each td. I then convert them in CSS to show a mobile view of the table. It all works fine but when you have multiple tables with different headers it takes the last table on the page and adds these data-label's to all the tables.

I cant seem to see what I am doing wrong and wondered if anyone could help?

$('table').each(function() { 
  if ($(this).find('th').length > 1) { 
    thcount = 0
    $(this).find('th').each(function() {
	  eachth = $(this)	
	  thcount=thcount+1		
	  $('tr td:nth-child('+thcount+')').each(function(a) {
		if (eachth.html() == '') {
		  $(this).css('padding-left', '6px');
		} else {
		  $(this).attr('data-label', eachth.html() + '\u00A0');	
		}
	  });
	});
  }
});	

It is better to do it in one th each. For example, like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$('table').each(function(){
  const table = $(this);
  table.find('th').each(function(index) {
    table.find(`td:nth-child(${index + 1})`).attr( 'data-label', $(this).text() + ' ' );
  })
})

<!-- language: lang-css -->

table th,
table td {
  padding: 4px;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<br>
<table>
  <tr>
    <th>4</th>
    <th>5</th>
    <th>6</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<!-- end snippet -->