JSFiddle - React, Tailwind, and code Playground

by letsGoHawks

HTML

<div id="mainContainer">
    <div><input type="text" ><input type="button" value=" + " onclick="addNew();"></div>
</div>

JavaScript

var counter = 0;

function addNew() {

    // Get the main Div in which all the other divs will be added
    var mainContainer = document.getElementById('mainContainer');
    
    // Create a new div for holding text and button input elements
    var newDiv = document.createElement('div');
    
    // Create a new text input
    var newText = document.createElement('select');

    
    var newOp1 = new Option();
    newOp1.text = "A";
    newOp1.value = "4.000";
    
    var newOp2 = new Option();
    newOp2.text = "B";
    newOp2.value = "3.000";

    newText.options.add(newOp1);   
    newText.options.add(newOp2);  
    
    //for testing
    newText.value = counter++;
    
    // Create buttons for creating and removing inputs
    var newAddButton = document.createElement('input');
    newAddButton.type = "button";
    newAddButton.value = " + ";
    
    var newDelButton = document.createElement('input');
    newDelButton.type = "button";
    newDelButton.value = " - ";
    
    // Append new text input to the newDiv
    newDiv.appendChild(newText);
    
    // Append new button inputs to the newDiv
    newDiv.appendChild(newAddButton);
    newDiv.appendChild(newDelButton);
    
    // Append newDiv input to the mainContainer div
    mainContainer.appendChild(newDiv);
    
    // Add a handler to button for deleting the newDiv from the mainContainer
    newAddButton.onclick = addNew;
    
    newDelButton.onclick = function() {
            mainContainer.removeChild(newDiv);
    };
}