JSFiddle - React, Tailwind, and code Playground

by BhaveshKachhadiya

HTML

<h4>
        Lesson Form</h4>
    <p>
        <strong>Full Name<span class="red">*</span></strong></p>
    <input name="cf_name" data-required="true" class="send" type="text" />
    <p>
        <strong>Email Address<span class="red">*</span></strong></p>
    <input name="cf_email" data-required="true" data-type="email" class="send" type="text" />
    <p>
        <strong>Cellphone No.<span class="red">*</span></strong></p>
    <input name="cf_cell" data-required="true" class="send" type="text" />
    <p>
        <strong>Instrument Type<span class="red">*</span></strong></p>
    <select name="cf_instrument" size="1" class="option">
        <option value="Piano">Piano</option>
        <option value="Vocals">Vocals</option>
        <option value="Guitar">Guitar</option>
        <option value="Bass">Bass</option>
        <option value="Flute">Flute</option>
    </select>
    <p>
        <strong>Lesson Type<span class="red">*</span></strong></p>
    <select name="cf_package_type" size="1" class="option">
        <option value="Beginner Lesson - R100">Beginner Lesson - R100</option>
        <option value="Advanced Lesson - R130">Advanced Lesson - R130</option>
        <option value="Professional Lesson - R160">Professional Lesson - R160</option>
    </select>
    <p>
        <strong>No. of Lessons<span class="red">*</span></strong></p>
    <select id="number-of-lessons" name="cf_number" size="1" class="option" onchange='test()'>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <script src="js/datepair.js"></script>
    <p class="datepair-title">
        <strong>Lesson Date & Time<span class="red">*</span></strong></p>
    <p class="datepair" data-language="javascript">
        <input type="text" name="cf_booking_date" class="date start" data-required="true" />
        <input type="text" name="cf_start_time" class="time start" data-required="true" />
     ...

JavaScript

function test() {
            var allLession;
            var allLessionTitle;
            var ua = window.navigator.userAgent
            var msie = ua.indexOf("MSIE ")
            allLession = document.getElementsByClassName('datepair');
            if (msie > 0)      // If Internet Explorer, return version number
            {
                allLession = document.querySelectorAll('.datepair');
                allLessionTitle = document.querySelectorAll('.datepair-title');
            }
            else {              // If another browser, return 0
                allLession = document.getElementsByClassName('datepair');
                allLessionTitle = document.getElementsByClassName('datepair-title');
            }

            for (i = 0; i < allLession.length; i++) {
                allLession[i].style.display = 'none';
                if (allLessionTitle[i] != null) {
                    allLessionTitle[i].style.display = 'none';
                }
            }

            var noOfDisplayLession = parseInt(document.getElementById('number-of-lessons').value);
            for (i = 0; i < noOfDisplayLession; i++) {
                allLession[i].style.display = '';
                if (allLessionTitle[i] != null) {
                    allLessionTitle[i].style.display = '';
                }
            }
        }