JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(1)" id="button_1">Add Deadline</td>

    <td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(2)" id="button_2">Add Deadline</td>

    <td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(3)" id="button_3">Add Deadline</td>

    <td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(4)" id="button_4">Add Deadline</td>

    <td class="imgButton" style="width: 185px; text-align: center;" onclick="addDeadline(5)" id="button_5">Add Deadline</td>
  </tr>
</table>

JavaScript

function addDeadline(num) {
  var newElem = document.createElement('td');
  newElem.innerText = 'Deadline ' + num;
  event.target.parentNode.insertBefore(newElem, event.target.nextSibling);
  event.target.removeAttribute('onclick')
}