JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<table cellspacing="0" cellpadding="3" class="participant_fields">
  <tbody>
    <tr id="crm_tr_f105">
      <th id="crm_td_f105_name" valign="top"> INID</th>
      <td id="crm_td_f105_input"></td>
    </tr>
    <tr id="crm_tr_f106">
      <th id="crm_td_f106_name" valign="top"> Name</th>
      <td id="crm_td_f106_input">test9</td>
    </tr>
    <tr id="crm_tr_f110">
      <th id="crm_td_f110_name" valign="top"> Stadt/Gemeinde</th>
      <td id="crm_td_f110_input"></td>
    </tr>
    <tr id="crm_tr_f114">
      <th id="crm_td_f114_name" valign="top"> TEL01</th>
      <td id="crm_td_f114_input">0123</td>
    </tr>
    <tr id="crm_tr_f115">
      <th id="crm_td_f115_name" valign="top"> TEL02</th>
      <td id="crm_td_f115_input">0456</td>
    </tr>
    <tr id="crm_tr_f116">
      <th id="crm_td_f116_name" valign="top"> TEL03</th>
      <td id="crm_td_f116_input">0789</td>
    </tr>
  </tbody>
</table>

JavaScript

function qsa(sel, parent) {
  return Array.prototype.slice.call((parent || document).querySelectorAll(sel));
}

window.reqListener = function() {
  console.log(this.responseText);
};

var callRemote = function(remote) {
  var oReq = new XMLHttpRequest();
  oReq.addEventListener('load', reqListener);
  oReq.open('GET', 'https://www.example.org/example.txt');
  oReq.send('remote=' + remote);
};

var pf = qsa('.participant_fields th');

pf.forEach(function(node) {
  if (node.innerText.indexOf('TEL0') === -1) {
    return;
  }
  var node2 = node.nextElementSibling;
  if (!node2) {
    return;
  }

  node2.innerHTML = '';

  var link = document.createElement('a');
  link.href = '#';
  link.addEventListener('click', function(event) {
    event.preventDefault();
    callRemote(123)
  });
  link.textContent = 'Call now.';
  node2.appendChild(link)

});