JSFiddle - React, Tailwind, and code Playground

by luizpaulo165

HTML

<select name="" id="">
    <option value="">Selecione algo</option>
    <option value="1">Criar inputs</option>
    <option value="2">Remove inputs</option>
</select>

<div class="wrap-inputs"></div>

CSS

select{
    font-size:16px;
    color:#ffffff;
    background:#FC6042;
    width:99%;
    display:block;
    border:0;
    margin-bottom:40px;
    padding:20px;
}
label{
    color:#2C82C9;
    display:block;
}
input{
    font-size:16px;
    color:#ffffff;
    background:#2CC990;
    width:90%;
    border:0;
    margin-bottom:20px;
    padding:20px;
}

JavaScript

$(function() {
    $('select').change(function() {
        $(this).find('option:selected').each(function(elem) {
            if ($(this).val() == '1') {
                createInputs();
            } else if ($(this).val() == '2') {
                $('.wrap-inputs input, .wrap-inputs label').remove();
            }
        });
    });
    
    // funcao que cria os inputs
    var createInputs = function () {
        var input1 = $('<label>Input 1</label><input />',{
            'id': 'input-1'
        }).appendTo($('.wrap-inputs'));
        
        var input2 = $('<label>Input 2</label><input />',{
            'id': 'input-1'
        }).appendTo($('.wrap-inputs'));
        
        var input3 = $('<label>Input 3</label><input />',{
            'id': 'input-1'
        }).appendTo($('.wrap-inputs'));
    }
});