Mi tabla HTML

 <thead> <tr> <th>ID</th> <th>Name</th> <th>Average</th> </tr> </thead> <tbody id="tableBody"> </tbody> </table>

Ejemplo de generación de tablas

 var arrayofObjects = [{sID: 025, name: John Doe, average: 80}, {sID: 893, name: Jane Smith, average: 82}]; function loadTable() { let table = document.getElementById("tableBody"); table.innerHTML = ""; let tr = ""; vararrayofObjects.forEach(x => { tr += '<tr>'; tr += '<td><a data-toggle="modal" data-target="#myModal1" id="sIDNum">' + x.sID + '</a></td>' + '<td>' + x.name + '</td>' + '<td>' + x.average + '</td>'; tr += '</tr>' }) table.innerHTML += tr; }

Lo que intenté obtener el valor de la primera columna (sID) al hacer clic y luego recorrer la matriz de objetos

 const tableBody = document.querySelector('#tableBody'); tableBody.addEventListener('click', (e) => { vararrayofObjects.forEach((element) => { if(element.sID == $('a').text()) { var personName = element.name; var personID = $('#sIDNum').text(); var personAvg = "Average " + element.average; } }); });

El problema es que la instrucción if me devuelve todos los valores de $('a').text()) en lugar del que hice clic. ¿Cómo lo implemento correctamente para que al hacer clic en mi etiqueta de anclaje en la primera columna ( sIDNum ) obtenga su valor, luego use ese valor para recorrer mi matriz de objetos y obtener los valores del objeto que coincide con él?