jQuery способ применения одной и той же функции к различным объектам идентификатора в зависимости от того, какая кнопка нажата

Question

Я пытаюсь объединить инструмент, который принимает данные из таблицы Excel, создает таблицу, добавляет кнопку к каждой строке таблицы, и эта кнопка запускает таймер. до сих пор мне удалось собрать воедино функциональность, которая создает таблицу, мне удалось применить разные идентификаторы к каждому динамически созданному элементу span, содержащему значение таймера, и нашел функцию basi c setInterval () с функцией таймера , У меня возникли проблемы с получением функции таймера для применения к каждому элементу span при нажатии соседней кнопки startTimer. В настоящее время все кнопки имеют одинаковый класс. Я предполагаю, что способ go заключается в назначении уникальных идентификаторов для каждой кнопки и для l oop, который перебирает каждый идентификатор диапазона, но в этот момент я довольно растерялся. Чтобы понять, как работает создание таблицы, вы можете просто написать пару слов в отдельных строках в текстовой области.

Извиняюсь за все плохие практики кодирования в прилагаемой скрипте JS, на данный момент я думаю, что вполне очевидно, что я не очень хорош в этом.

	function generateTable() {
    var data = $('textarea[name=excel_data]').val();
    console.log(data);
var rows = data.split("\n");

var table = $('<table id="theTable" />');

for(var y in rows) {
    var cells = rows[y].split("\t");
    var row = $('<tr class="tableRow" />');
    for(var x in cells) {
        row.append('<td>'+cells[x]+'</td>');
    }
    table.append(row);    
}   
// Insert into DOM
$('#excel_table').html(table);
$('#excel_table tr').each(function()
{   
    $(this).append('<td> <input type="button" class="startClock" value="start timer"/><span>20</span> </td>');
    
});
 
$('#excel_table span').each(
  function(index){
     $(this).attr('id','count'+index)  
    });



$(".startClock").click( function(){
   let counter = 20;
   setInterval(function() {
   let  ind=0
    var numRows = $('.tableRow').length;
     for(i=0;i<=numRows;i++){
      ind=i
     };
     counter--;
      if (counter >= 0) {
         span = document.getElementById('count0')
         span.innerHTML = counter +"seconds";
      }
      if (counter === 0) {
         document.getElementById('count0').innerHTML='available';
         clearInterval(counter);
       }
     }, 1000);
});

}

table{
border-collapse:collapse;
border:1px solid #000000;
}

table td{
border:1px solid #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<p>Paste excel data here:</p>
    <textarea name="excel_data" style="width:250px;height:150px;"></textarea><br>
    <input type="button" onclick="javascript:generateTable()" value="Genereate Table"/>
     <input type="button" id='listNum' value="Genereate"/>
<br><br>
    <p><span id='howMany'></span>Table data will appear below</p>
<hr>
<div id="excel_table"></div>

JS скрипка