JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<select id="type">
    <option value="pho">Phone</option>
    <option value="sub">Subscription</option>
    <option value="acc">Accessory</option>
</select>
<div class="entry" id="sub">
    <select>
        <option>AT&amp;T</option>
        <option>XYZ</option>
    </select>
    <select>
        <option>12 Month</option>
        <option>24 Month</option>
        <option>36 Month</option>
    </select>
    <label>Phone number
        <input/>
    </label>
</div>
<div class="entry" id="acc">
    <input/>
</div>
<div class="entry" id="pho">
    <input/>
</div>
<button>Add</button>
<div class="detailcontainer">
    <div class="detailrow">
        <div class="detailcell">
            <input type="checkbox" />
        </div>
        <div class="detailcell">
            <select>
                <option>AT&amp;T</option>
                <option>XYZ</option>
            </select>
            <select>
                <option>12 Month</option>
                <option>24 Month</option>
                <option>36 Month</option>
            </select>
            <label>Phone number
                <input/>
            </label>
        </div>
        <div class="detailrow">
            <div class="detailcell">
                <input type="checkbox" />
            </div>
            <div class="detailcell">A</div>
            <div class="detailcell">B</div>
            <div class="detailcell">C</div>
        </div>
    </div>

CSS

.entry {
    display: inline-block;
}
.detailcell {
    display: inline-block;
}
.detailcontainer {
    border: solid black 1px;
}

JavaScript

$('.entry').hide();
$('#phone').show();
$('#type').on('click', function () {
    $('.entry').hide();
    $('#' + $(this).val()).show();
});