injectTPS_invi.js

const addTableHeader = () => {
  // get table header
  const patientHeader = document.querySelectorAll('.head th')[1]
  
  // create new th element
  const th = document.createElement('th')
  
  // name th
  th.innerText = 'Treatment Planning'
  th.style = 'display: table-cell; padding-left: 70px; padding-right: 20px'

  // append th to an existing table header, right after "Patient" th
  patientHeader.parentNode.insertBefore(th, patientHeader.nextSibling)
}

const addRequestTPSButton = () => {

 //get table with patients
 const trs = document.querySelectorAll('tbody')[0].querySelectorAll('tr')

 // add request TPS button for each patient
 Array.from(trs).forEach(tr => {
   const patientData = getPatientData(tr.querySelectorAll('td')[1])

   const td = tr.querySelectorAll('td')[1]
   
   // new td
   const requestTpsTd = document.createElement('td')
   requestTpsTd.style = 'display: table-cell; padding-left: 70px; padding-right: 20px'
   
   // button
   const requestTpsButton = document.createElement('button')
   requestTpsButton.innerText = 'Request TPS'
   requestTpsButton.addEventListener('click', (e) => {
     e.preventDefault()
     console.log(patientData)
   })
   
   requestTpsTd.appendChild(requestTpsButton)

   td.parentNode.insertBefore(requestTpsTd, td.nextSibling)
 })
}

const getPatientData = (td) => {
  const elDiv = td.querySelectorAll('div')[2]
  const elA = elDiv.querySelector('a');
  const linkToPatient = elA.href;
  const patientName = elA.querySelector('span').innerText;

  return {
    patientName,
    linkToPatient
  }
}

addTableHeader()
addRequestTPSButton()