addEventListener to an element in a array doesn't set the expected value in the textfield - Javascript

Question

I have been trying to create a menu for emojis in my html file. I am importing data from a CSV file converting it to a single dimension array and am trying to display it on the html page. I am able to display it but when I add a eventListener to each cell of the table to display the emoji I clicked in the text field then It shows the last Emoji of the row

The CSV File contains all the Dec values for the emoji

---

Following is my code to display the emojis :

function createEmojiDropdown(table) {
  var i = 0;
  table.forEach(e => {
    var a = 0;
    var row = document.createElement('tr');
    row.id = "e-row"
    while (a < 2) {
      var cols = "&#" + table[i];
      if (table[i] == undefined) {
        return;
      }
      var cell = document.createElement('td');
      cell.id = "e-cell";
      cell.innerHTML = cols;
      // cell.onclick = `click_e(${cell.innerHTML})` // I have tried this too but it didn't work
      row.append(cell);
      cell.addEventListener('click', () => {
        document.getElementById('message').value += cell.innerHTML;
      });
      a++;
      i++;
    }
    document.getElementById('emojis').append(row);
  });
}

var data = ["128512", "128514", "129315", "128518"]; //dummy data just for example
createEmojiDropdown(data);

<input type="text" class="message" id="message" placeholder="Type a message" />
<div class="emojis-container">
  <div class="emojitext">Emoji</div>
  <div class="emojis" id="emojis"></div>
</div>

Is there any way of doing this? Thank you !

Answer 1

When binding the click event, you'll probably want to use the MouseEvent to find the cell that triggered the event:

cell.addEventListener('click', event => {
    document.getElementById('message').value += event.target.innerHTML;
});