How to add button inside textarea using Javascript?

Question

My client wants me to create a textarea inside where there has to be a button like the below picture:

Into the above pictue please follow into the right side of the picture where you can see blue color braces which is the button.

This has to be work like this 2nd picture on-click (like drop down):

Into the 2nd pictue we can see that upon clicking on the braces button the list has opened and clicking on an option from the list is writing on the Textarea. But this whole thing should work in client side i.e. using Javascript or Jquery in which I'm quite new at. So, I could not start on this. I need your wise suggestion on the above regarding how may I achieve the following meanwhile I'm also doing my research if I get to know anything then I will update my question or answer my question for other. Thanks in advance.

Answer 1

Here's a version more or less as you asked, however, due to the fact that the container-div for the menu will have to be placed outside the textarea, there isn't really a way for it to dynamically fit to the textarea using only CSS - so for that you will have to use JavaScript.

* {
  box-sizing: border-box;
}
#textareamenu_content ul,#textareamenu {
  display: none;
}
#textarea_container {
  position: relative;
  display: inline-block;
}
#textarea_container label {
  background: blue;
  color: white;
  padding: .2em;
  position: absolute;
  top: 0;
  right: 0;
  padding: .2em;
}
#textareamenu:checked ~ #textareamenu_content {
  position: absolute;
  top: 0;
  right: 0;
  overflow-y: scroll;
  max-height: 15em;
  min-height: 12em;
  min-width: 10em;
  border-left: 1.4em solid blue;
  z-index: 99;
}
#textareamenu:checked ~ #textareamenu_content ul {
  display: block;
}
textarea {
  min-height: 15em;
    min-width: 40em;
}
#textareamenu:checked ~ label {
  position: absolute;
  right: 8.6em;
  top: 0;
  width: 1.4em;
  z-index: 100;
}

<div id="textarea_container">
    <textarea name="text"></textarea>
    <input type="checkbox" id="textareamenu">
    <label for="textareamenu">{}</label>
    <div id="textareamenu_content">
        <ul>
            <li>First_Name</li>
            <li>Last_Name</li>
        </ul>
    </div>
</div>