JSFiddle - React, Tailwind, and code Playground

by jangoforhire

HTML

<div id="url">https://api.test.com<span id="endpoint" readonly="readonly"> </span>

    </url>
    <div class="control-group">
        <label class="control-label" for="selectbasic">Endpoint</label>
        <div class="controls">
            <select id="dropdown" name="selectbasic" class="input-xlarge">
                <option value="none">select</option>
                <option value="id">/test/{id}</option>
                <option value="id_date">/test/{id}/{date}</option>
            </select>
        </div>
        <div id="textBoxContainer"></div>

JavaScript

$('#dropdown').change(function () {
        $('#textBoxContainer').empty();
        var data = $(this).find('option:selected').attr('value');
        var cleaned_data = data.split("_");
        var num_args = cleaned_data.length;
        for (var i = 0; i < num_args; i++) {
            $('#textBoxContainer').append('<label class="control-label" for="textinput">' + cleaned_data[i] + '</label><br/><input id="' + cleaned_data[i] + '" name="textinput" size="25" type="text" placeholder="' + cleaned_data[i] + '" class="input-xlarge"><br/>');
        }

    });

    jQuery('#date').on('input', function () {
        $('#endpoint_curl').html('test');
    })