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

Issue

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

i guess this might work for you.

function addTask() {
    let inputTd = document.getElementById('tdInput');
    let inputTask = document.getElementById('inputTask');
      
    let tdOne = document.getElementById('taskName1');
    let tdTwo = document.getElementById('taskName2');
    let tdThree = document.getElementById('taskName3');
    if(inputTask.value != ""){
        if(inputTd.value == 1){
            tdOne.insertAdjacentHTML('beforeend', '<p>'+inputTask.value+'</p>');
        }else if(inputTd.value == 2){
            tdTwo.insertAdjacentHTML('beforeend', '<p>'+inputTask.value+'</p>');
        }else{
            tdThree.insertAdjacentHTML('beforeend', '<p>'+inputTask.value+'</p>');
        } 
    }else{
      alert("Please insert your task!");
    }
  inputTask.value = "";
};

<label>Choose TD :</label>
<select id="tdInput">
  <option value="1">TD1</option>
  <option value="2">TD2</option>
  <option value="3">TD3</option>
</select>

<input type="text" id="inputTask" placeholder="Enter your your task">
<button id="addTask" type="button" onClick="addTask()">Add</button>
<br><br>
<table border="1">
  <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="taskName1"></td>
    <td id="taskName2"></td>
    <td id="taskName3"></td>
  </tr>
</table>

Answered By - anwaruddin akmal