JSFiddle - React, Tailwind, and code Playground

by Shin Okada

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-group col-md-12"
 >
    <label>Start Date Time</label>
        <input
        type="datetime-local"
        name="start"
        value="1970-01-01T09:00:00"
        class="form-control"
	        >

    
    </div>
        <!-- load the view from the application if it exists, otherwise load the one in the package -->
            <!-- html5 datetime input -->


<div class="form-group col-md-12"
 >
    <label>End Date Time</label>
        <input
        type="datetime-local"
        name="end"
        value="1970-01-01T09:00:00"
        class="form-control"
	        >

    
    </div>
        <!-- load the view from the application if it exists, otherwise load the one in the package -->
            <!-- checkbox field -->

<div class="form-group col-md-12"
 >
        <div class="checkbox">
    	<label>
    	  <input type="hidden" name="repeat" value="0">
    	  <input type="checkbox" value="1"

          name="repeat"

          
                    > Repeat
    	</label>

        
            </div>
</div>
        <!-- load the view from the application if it exists, otherwise load the one in the package -->
            <!-- select2 from array -->
<div class="form-group col-md-12"
 >
    <label>Days of Week</label>
    <select
        name="dow[]"
        class="form-control select2"
	        multiple         >

        
                                                <option value="1"
                                            >Monday</option>
                                    <option value="2"
                                            >Tuesday</option>
                                    <option value="3"
                                           ...

JavaScript

jQuery(document).ready(function($) {
    var start = $( "input[name='start']").closest('div');
    var end = $( "input[name='end']").closest('div');
    var date_start = $( "input[name='date_start']").closest('div');
    var date_end = $( "input[name='date_end']").closest('div');
    var time_start = $( "input[name='time_start']").closest('div');
    var time_end = $( "input[name='time_end']").closest('div');
    var dow = $( "select[name='dow[]']").closest('div');
    var repeatbox = $( "input[name='repeat']");
    date_start.hide();
    date_end.hide();
    time_start.hide();
    time_end.hide();
    dow.hide();
    function resetForm($form) {
        $form.find('input:text, input:password, input:file, select, textarea').val('');
        $form.find('input:radio, input:checkbox').prop('checked',false).prop('selected',false);
    };
    repeatbox.on('click', function() {
        if($(this).is(':checked')) {
            resetForm(start); resetForm(end);
            start.hide(); end.hide();
            date_start.show(); date_end.show(); time_start.show(); time_end.show(); dow.show();
        } else {
            resetForm(date_start); resetForm(date_end); resetForm(time_start); resetForm(time_end);
            date_start.hide(); date_end.hide(); time_start.hide(); time_end.hide(); dow.hide();
            start.show(); end.show();
        }
    });
});