JSFiddle - React, Tailwind, and code Playground

by kairavthakar2016

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="width:100%;">
Replace:
        <form>
            <div class="">
                <div class="col-lg-10">
                    <div id="row">
                        <div class="input-group m-3">
                            <select class="custom-select custom-select-sm" name="test" id="type"><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>&nbsp;&nbsp; with &nbsp;&nbsp;
                            <div id="values"></div>
                            <div class="input-group-prepend" style="margin-left: 20px;">
                                 <button class="btn btn-danger" id="DeleteRow" type="button">
                                     <i class="bi bi-trash"></i>
                                     Delete row
                                 </button>
                             </div>
                        </div>
                    </div>

                    <div id="newinput"></div>
                    <br />
                    <button id="rowAdder" type="button" class="btn btn-dark">
                        <span class="bi bi-plus-square-dotted">
                        </span> ADD row
                    </button>
                </div>
            </div>
        </form>
    </div>

JavaScript

$(document).on("change", "#type", function() {
        var val = $(this).val();
        if (val == "id") {
        
           $(this).next().html("<select><option>First option</option><option>Second Option</option></select>");
        } else if (val == "client") {
            $(this).next().html("<input value='Example input' />");

        } else if (val == "file") {
           $(this).next().html("normal text");
        }
    });


 $("#rowAdder").click(function () {
            newRowAdd =
            '<div id="row">' +
            '<div class="input-group m-3">' +
            '<br /><select class="custom-select custom-select-sm" name="test" id="type"><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>' +
            '&nbsp;&nbsp; with &nbsp;&nbsp;' +
            '                <div id="values"></div>' +
            '                <div class="input-group-prepend" style="margin-left: 20px;">' +
            '                     <button class="btn btn-danger"' +
            '                         id="DeleteRow" type="button">' +
            '                         <i class="bi bi-trash"></i>' +
            '                         Delete row'+
            '                     </button> </div>' +
            '</div> </div>';

            $('#newinput').append(newRowAdd);
        });

$(document).ready(function() {
        $(document).on("click", "#DeleteRow", function () {
            $(this).parents("#row").remove();
        });
        });