Custom emoji picker is not inserting emojis - html

Question

So today i worked on to create emoji picker in jQuery, PHP and HTML.
The problem is that jQuery is not inserting emojis into the input type, here is my code
<input class="form-control" name="message" placeholder="Enter your message..." maxlength="150" id="shout" required>
<button type="button" onclick="toggleEmojiDrawer()" class="btn btn-primary btn-block mg-b-10">Emojis </button>
</div>
<div class="body hidden" id="emojis">
<center>
<?php
$result = mysqli_query($con, "SELECT * FROM `emojis` ") or die(mysqli_error($con));
while($row = mysqli_fetch_assoc($result)) {
echo "
<img class='icon' onclick='addEmoji(this.innerHTML)' src='".$row['url'] ."' alt='".$row['Wut'] ."' height='20' width='20' />
<script>
function addEmoji(icon) {
let inputEle = document.getElementById('shout');
input.value += icon;
}
function toggleEmojiDrawer() {
let drawer = document.getElementById('emojis');
if (drawer.classList.contains('hidden')) {
drawer.classList.remove('hidden');
} else {
drawer.classList.add('hidden');
}
}
</script>
";
}
?>

Answer 1

Not sure where to start, but here are some things:
center tag is deprecated, just FYI
you are looping the tag that has a function in it, so you're inserting the same function into DOM multiple times... Take it out of the loop, it should be one function that handles all calls
this is not a PHP question, most likely it's a jquery one, but since we can't see the output of your query because we don't have your tables, I would recommend to click "view source" on your page and paste in the source here so we can see what you're actually trying to do... but first, remove the functions from the loop. :)