JSFiddle - React, Tailwind, and code Playground

by tonyjcamp

HTML

<div id="personal-info" class="account-info">
                <h4>
                    User Information
                    <!-- User -->
                </h4>
                <div class="form-row clearfix">
                    <div class="row-info fl">
                        <label for="firstname">First Name</label>
                        <input type="text" id="firstname" name="firstname" value="Tony" placeholder="Tony">    
                    </div>
                    <div class="row-info fr">
                        <label for="lastname">Last Name:</label>
                        <input type="text" id="lastname" name="lastname" value="Camp" placeholder="Camp">
                    </div>
                </div>
                <div class="form-row clearfix">
                    <div class="row-info single fl">
                        <label for="email">Email:</label>
                        <input type="text" id="email" name="Email Address" value="[email protected]" placeholder="[email protected]">
                    </div>
                </div>
                <div class="form-row clearfix">
                    <div class="row-info fl">
                        <label for="institution">Institution:</label>
                        <select name="institution">
                            <option value="1" selected="">Institution 1</option>
                            <option value="2">Institution 2</option>
                            <option value="3">Institution 3</option>
                        </select>
                    </div>
                    <div class="row-info fr">
                        <label for="language">Language:</label>
                        <select name="language">
                            <option value="en" selected="">English</option>
                            <option value="fr">French</option>
                            <option value="it">Italian</option>
                        </select>
                        <a href="#"...

JavaScript

$(function() {

            $('#login-info').delegate('.change-password', 'click', function() {
                  $('#update-password, #action-btns').removeClass('hidden');
                  return false;
            });

            $('#personal-info').delegate('.change-personal-info', 'click', function() {
                return false;
            });

            $('#action-btns').delegate('.btn-danger', 'click', function() {
                $('#update-password, #action-btns').addClass('hidden');
                $('.new-password, .confirm-password').val('');
                $('#action-btns').find('.btn-primary').attr('disabled', 'disabled');

                handleError( [ $('.new-password'), $('.confirm-password') ], 'error', false );
                $('.matching-msg').remove();
                
                return false;
            });

            $('#action-btns').delegate('.btn-primary', 'click', function() {
                return false;
            });

            function handleError( elements, errorClass, isError ) {
                $('.matching-msg').remove();
                // check to see if elemets is an array
                if( Array.isArray(elements) ) {
                    // add error to each element in the array 
                    for ( var i = 0; i < elements.length; i++ ) {
                        if ( isError ) {
                            elements[i].addClass(errorClass);
                        } else {
                            elements[i].removeClass(errorClass);
                        }
                    }
                // add class to the single element passed
                } else {
                    if ( isError ) {
                        elements.addClass(errorClass);
                    } else  {
                        elements.removeClass(errorClass);
                    }
                }
            }

            $('#login-info').delegate('.new-password, .confirm-password', 'keyup blur', function(e) {
 ...