JSFiddle - React, Tailwind, and code Playground

by thillin

HTML

<form id="quick" class="quick">
    <input class="quick name"></input>
    <input class="quick location"></input>    
    <select class="quick bounty">
        <option value="first">First</option>
        <option value="second">Second</option>
        <option value="third">Third</option>
    </select>
</form>

<form id="form">
    <input class="table name"></input>
    <input class="table location"></input>    
    <select class="table bounty">
        <option value="first">First</option>
        <option value="second">Second</option>
        <option value="third">Third</option>
    </select>
</form>

CSS

#quick {
    position: absolute;
    top: 10px;
    left: 10px;
}
#form {
    position: absolute;
    top: 100px;
    left: 10px;
}

JavaScript

$('.quick.keyword').change(function() {
    var name = this;
    var content = $(name).val();
    updateVal('.keyword', content)
});
$('.quick.location').change(function() {
    var name = this;
    var content = $(name).val();
    updateVal('.loc', content)
});
$('.quick.bounty').change(function() {
    var name = this;
    var content = $(name).val();
    updateVal('.bou', content)
});
function updateVal(ident, content) {
    var newIdent = ".table" + ident;
    $(newIdent)
               .not(':button, :submit, :reset, :hidden')
               .val('')
               .removeAttr('checked')
               .removeAttr('selected');
    $(newIdent).val(content);
}