JSFiddle - React, Tailwind, and code Playground

by guradio

HTML

<div id="maincontainer">
    <div id="containerpadding">
        <input type="text" name="" id="" class="" />
        <input type="button" id="clear" value="Clear" name="" />
        <input type="checkbox" name="" id="" class=" ">
        <input type="radio" name="" id="" value="">
        <select id="" name="" class=" ">
            <option value=""></option>
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
        </select>
    </div>
</div>

JavaScript

$(document).on('click', '#clear', function () {
    $('#maincontainer').find('input[type=checkbox], input[type=radio]').each(function () {
        $(this).prop('checked', false);
    });
    $('#maincontainer').find('textarea,input[type=text]').each(function () {
        var defaultVal = $(this).data('default');
        $(this).val(defaultVal);
    });
    $('#maincontainer').find('option').prop('selected', function () {
        return this.defaultSelected;
    });
});