jQuery-emoji | Let textarea or editable div | Icon library

tl;dr

I have a dropdown list with the names of png symbols and would like to present a live preview of what the image looks like next to the dropdown before the user hits 'submit'.

More detailed information:

I have a leaflet.js map where the user can place markers. When the user does, a popup opens where a symbol for the marker can be choosen. This is where the dropdown menu sits and of course it would be nice to have a preview of the symbol. Especially as there are quite a few.

Initially I wanted to have an emoji-picker-style menu with different tabs for different categories of symbols. Alas, I hardly managed to find any libraries/code snippets as I do not want to insert unicode smileys but png symbols. What I did find was the onesignal emoji-picker and the jquery.emojiarea plugin. But I failed to get them to work. Most likely because I'm a javascript beginner.

Then I tried to fall back to rveras image-picker for a simpler but hopefully easier to implement way, but also failed at getting it to work.

Now I think, maybe the is a simple, pure jquery way of doing just a preview of the png next to a dropdown?

So you see, my question is actually three-fold:

1. Does anyone know a tutorial for dummies on how to get a emoji-picker style menu to work with png symbols? Or...
2. Can anyone show how to get the image-picker to work? Or ..
3. Can you tell me how I do this with vanilla jquery or javascript?

A problem might be that I'm operating within a leaflet popup that only allows html as content, so my code looks something like this: