JSFiddle - React, Tailwind, and code Playground

by Thet Hlaing

HTML

<select id="services">
  <option value="">Please select the service</option>
  <optgroup label="Body Message">
    <option>Royal Traditiona Thai Message 90 mins - 30,000 kyat</option>
    <option>Royal Traditiona Thai Message 120 mins - 40,000 kyat</option>
  </optgroup>
  <optgroup label="Body SCRUB">
    <option>Firming Coffee Body Scrub 60 mins - 33,000 kyat</option>
  </optgroup>
  <optgroup label="Body Wrap">
    <option>Tanaka Body Mask 60 mins - 45,000 kyat</option>
  </optgroup>
</select>
<button type="button" id="add-services">
  Add Service
</button>
<div id="selected-services-list-display"></div>

This text area is for server side usage only. Hide it from the display
<br/>
<textarea name="selected-services"></textarea>

CSS

#selected-services-list-display {
  margin: 30px 0px;
}

#selected-services-list-display div {
  display: block;
  padding: 10px;
  cursor: pointer:
}

#selected-services-list-display>div>.close {
  content: "x";
  color: #ff0000;
  padding: 0px 10px;
  cursor: pointer;
}

textarea[name=selected-services] {
  width: 500px;
  height: 200px;
  margin-top: 10px;
}

JavaScript

document.querySelector("#add-services").addEventListener("click", event => {
  let serviceListSelectBox = document.querySelector("#services");
  if (serviceListSelectBox.value !== "") {
    let textBoxForServerSide = document.querySelector("textarea[name=selected-services]");
    let newService = document.createElement("div");
    let closeButton = document.createElement("span");

    closeButton.innerHTML = "x";
    closeButton.classList.add("close");

    newService.dataset.value = serviceListSelectBox.value;
    newService.innerText = serviceListSelectBox.value;
    newService.append(closeButton);

    document.querySelector("#selected-services-list-display").append(newService);

    textBoxForServerSide.value = textBoxForServerSide.value + serviceListSelectBox.value + "\n";
  } else {
    alert("Please select a service from the list");
  }
});

document.querySelector("#selected-services-list-display").addEventListener("click", event => {
  if (event.target.tagName.toUpperCase() === "SPAN") {
    let parentDiv = event.target.parentNode;
    let currentValue = parentDiv.dataset.value;
    parentDiv.parentNode.removeChild(parentDiv);

    let textBoxForServerSide = document.querySelector("textarea[name=selected-services]");
    textBoxForServerSide.value = textBoxForServerSide.value.replace(currentValue + "\n", "");
  }
});