<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script> $(document).ready(function() { //start adding winCount and lossCount to beside var dbData = <?php echo json_encode($arrayDbData); ?>; var myString = JSON.stringify(dbData); //convert json to string myString = myString.slice(2); //remove 1st 2 characters myString = myString.slice(0,-2) //remove last 2 characters myString = myString.replace(/[,"]/g, ''); //remove "," var arrayLine = myString.split('<br>'); var i = 0; jQuery.each(arrayLine, function() { var eachData = arrayLine[i].split('##'); var pairSymbol = eachData[0].trim(); var elementName = eachData[1]; var winCount = eachData[2]; var lossCount = eachData[3]; //hehe let targetTd = $('td:contains("' + pairSymbol + '")'); if (targetTd.length > 0) { let tdContent = targetTd.html(); var $html = $(`<span>${tdContent}</span>`); $html.each(function() { if ($(this).text().includes(elementName)) { $(this).html(function(index, oldHtml) { //return oldHtml.replace('*<br>', '* <span style="color:blue;">' + winCount + ' </span><span style="color:red;">' + lossCount + '</span><br>'); var escapedElement = elementName.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); var regex = new RegExp('(' + escapedElement + '.*?)(<br>)'); return oldHtml.replace(regex, '$1 <span style="color:blue;">' + winCount + ' </span><span style="color:red;">' + lossCount + '</span>$2'); }); $('td:contains("' + pairSymbol + '")').html($html.prop('outerHTML')); return false; // Exit the loop once the line is found } }); //console.log($html.prop('outerHTML')); } else { console.log('No matching <td> found.'); } i++; }); }); </script>