JSFiddle - React, Tailwind, and code Playground

by soniii

HTML

<div class="multi-field-wrapper">
 <div class="multi-fields">
 <div class="multi-field">
<select id="dropdown" >
    <option value="">Please Select...</option>
    <option value="yellow">Option 1</option>
    <option value="option 2 ">Option 2</option>
</select>

<button type="button" class="remove-field">Remove</button>
 <div class="yellow msg" style="display: block;margin-left: 50px;">name<input type="text" style="
    margin-left: 75px;
"></div>
</div>
 </div>
<button type="button" class="add-field" id="addNew" disabled >Add new</button>
</div>

JavaScript

$(document).ready(function(){
        $("select").change(function(){
            $(this).find("option:selected").each(function(){
                var val = $(this).attr("value");
                if(val){
                    $(".msg").not("." + val).hide();
                    $("." + val).show();
                } else{
                    $(".msg").hide();
                }
            });
        }).change();
    });
    
    window.addEventListener('load', function () {
        $("#dropdown").change(function() {
            $("#addNew").prop("disabled", false);
        });

        $("#addNew").click(function() {
            $("#dropdown").append($(new Option("New option", 4)));
        });
    })
    
    
    $('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});