JSFiddle - React, Tailwind, and code Playground

by liquidmetalrob

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="retro_add_exercises" style="display:none">
              <div class="row">
                <div class="input-field col s12">
                  <div class="select-wrapper initialized"><span class="caret">▼</span>
                    <select class="initialized"  id="exercise_category">
                      <option value="0" disabled="" selected="">Please Select One</option>
                      <option value="1">Cardio</option>
                      <option value="2">Weight Lifting</option>
                      <option value="3">Stretching</option>
                    </select>
                  </div>
                  <label>Choose Exercise Type</label>
                </div>
              </div>

              <!-- CARDIO SELECT FIELD -->
              <div class="row" style="display:none" id="select_cardio">
                <form method="POST" id="cardio_form">
                  <div class="input-field col s12">
                    <div class="select-wrapper initialized"><span class="caret">▼</span>
                      <select id="cardio_exercise" name="cardio_exercise" class="initialized">
                        <option value="0" disabled selected>Choose Cardio Exercise</option>
                        <option value="1">Jumping Jacks</option>
                        <option value="2">Jump Rope</option>
                        <option value="3">Precor</option>
                        <option value="4">Running (outside)</option>
                        <option value="5">Swimming</option>
                        <option value="6">Treadmill</option>
                      </select>
                    </div>
                    <input type="date" style="display:none" id="cardio_exercise_date" name="cardio_exercise_date">
                    <input placeholder="Duration (minutes)" name="cardio_duration" id="cardio_duration" type="number" class="validate">
   ...

JavaScript

$(document).ready(function() {

    $('#retroactive_date_form').submit(function(e) {
        e.preventDefault();
        var date = $('#retroactive_date_picker');
        var exercise_date = date.val();
        if (exercise_date !== '') {
            var exercise_category;
            var weight_set_type;
            console.log(exercise_date);
            date.prop('disabled', true);
            $('#retroactive_date_submit').addClass('disabled');
            $('#retro_add_exercises').show();

            //Exercise Category Function
            $('#exercise_category').on('change', function() {
                exercise_category = $('#exercise_category').val();
                console.log(exercise_category);
                if (this.value === '1')
                {
                    $('#select_cardio').show();
                    $('#drop_or_reg_set_select_exercise').hide();
                    $('#super_set_select_exercises').hide();
                    $('#drop_and_regular_set_action_btn').hide();
                    $('#super_set_action_btn').hide();
                    $('#super_set_table_row').hide();
                    $('#drop_or_reg_set_table_row').hide();
                }
                else
                    $('#select_cardio').hide();
                if (this.value === '2')
                {
                    $('#select_weight').show()
                }
                else
                    $('#select_weight').hide();
                if (this.value === '3')
                {
                    $('#select_stretch_fields').show();
                    $('#select_cardio').hide();
                    $('#drop_or_reg_set_select_exercise').hide();
                    $('#super_set_select_exercises').hide();
                    $('#drop_and_regular_set_action_btn').hide();
                    $('#super_set_action_btn').hide();
                    $('#super_set_table_row').hide();
                    $('#select_weight').hide();
                   ...