Variable Input appearance and placement. I want each input variable to be placed in their own <td> column rather then the same one

IMAGE
1: https://i.stack.imgur.com/BCTFE.png

how do I get Input variables to display in different html TD boxes?
I have 3 TD side by side, I want input 1 to be under TD1, Input 2 to be under TD2 and Input 3 to be under TD3.
However I am getting all inputs under TD1 and not the the rest.

HTML

    <input type="text" id="inputTask" placeholder="Enter your your task">
    <button onclick="addTask()">Add</button>

<main>
    <table>
        <tr>
            
            <td class="table-data">Task description 1</td>
            <td class="table-data">Task description 2</td>
            <td class="table-data">Task description 3</td>
        </tr>
        <tr> 
           <td id="taskName"></td>
           <td id="taskName"></td>
           <td id="taskName"></td>
        </tr>

JAVASCRIPT

function addTask() {
let inputTask = document.getElementById('inputTask');
console.log(inputTask.value); 

let ul = document.getElementById('taskName');
ul.innerHTML+= `<p class="table-data">${inputTask.value}</p>`; 
inputTask.value = '';

}

>Solution :

First of all, element ids should be unique. You have three tds with the same ID, which is bad to begin with.

If you want to add an input field to each td in turn (that is, if you click Add button twice, it adds the input to the first td and then second td), you need two things:

• Unique identifier for each td
• Global index that keeps track of which is the "current" td to add the input to.

Here’s the solution:

let currentIndex = 0;

function addTask() {
  let inputTask = document.getElementById('inputTask');
  console.log(inputTask.value);

  let ul = document.getElementById(`taskName-${currentIndex}`);
  ul.innerHTML += `<p class="table-data">${inputTask.value}</p>`;
  inputTask.value = '';
  
  currentIndex = (currentIndex + 1) % 3;
}

td {
  border: 1px solid;
}

<input type="text" id="inputTask" placeholder="Enter your your task">
<button onclick="addTask()">Add</button>

<main>
  <table>
    <tr>
      <td class="table-data">Task description 1</td>
      <td class="table-data">Task description 2</td>
      <td class="table-data">Task description 3</td>
    </tr>
    <tr>
      <td id="taskName-0"></td>
      <td id="taskName-1"></td>
      <td id="taskName-2"></td>
    </tr>
</main>