Add an emoji picker on button click with javascript

I need a short/simple custom written java script code (3-5 lines only), to display my emoji gallery so i can pick a emoji to add/embed to my text field form. NOTE: No API, or url add-ons, just pure java script only. If possible I'm interested to use a CSS only solution. Also needed to be capability on all browsers. 1) first, click emoji button (right); makes emoji gallery appear overlay. (suggestion my .emoji-gallery div overlay appears softly using opacity transition css function via JS) 2) then once appeared, each dim emoji on mouse hover will appear move clear (see emoji top right) 3) Once clicked, the selected emoji appears in the form text field (right) Note, if chatline is already written in text field, it will add emoji icon to the selected position within text string. (note chatline disappears once click may need to be fixed?) Once the solution is reached and employed, A follow up project will be posted to continue the embedding of text lines from outside of this page etc. If Your solution is short, simple, and easy to use then you will be hired for the followup projects. I have attached my html example page (below) for you to look over. If you think you can the skills to achieve & finish the task here, please contact me for any more further questions or details before hiring...