JSFiddle - React, Tailwind, and code Playground

by Vetrivel Samidurai

HTML

<input type="button" id="more_fields" onclick="add_fields();" value="Add More" />

       <div id="room_fileds">
           <div>
            <div class='label'>Room 1:</div>
            <div class="content">
                <span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X </span>
                <span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span>
            </div>
           </div>
        </div>

CSS

div { padding:10px;}

JavaScript

var room = 1;
function add_fields() {
    room++;
    var objTo = document.getElementById('room_fileds')
    var divtest = document.createElement("div");
    divtest.innerHTML = '<div class="label">Room ' + room +':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div>';
    
    objTo.appendChild(divtest)
}