JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<select id="activitySelector">
      <option value="addNew">Add New Item</option>
</select>

JavaScript

var activities = document.getElementById("activitySelector");

activities.addEventListener("click", function() {
    var options = activities.querySelectorAll("option");
    var count = options.length;
    if(typeof(count) === "undefined" || count < 2)
    {
        addActivityItem();
    }
});

activities.addEventListener("change", function() {
    if(activities.value == "addNew")
    {
        addActivityItem();
    }
    console.log(activities.value);
});

function addActivityItem() {
    var name = prompt("Add an item", "item name");
    
    var option = document.createElement("option");
    option.value = name;
    option.innerHTML = name;
    
    activities.appendChild(option);
}