JSFiddle - React, Tailwind, and code Playground

by edemdrummer

HTML

<div class="form_elements_div">
    <div class="form_left_column_div">
        <div class="form_row_div">
            <div class="form_label_div">
                <label for="code">Customer Code:
                    <div class="required_field"></div>
                </label>
            </div>
            <div class="form_input_div">
                <input id="code" class="" name="code" type="text" value="pepsi" />
            </div>
        </div>
        <div class="form_row_div">
            <div class="form_label_div">
                <label for="company">Company:</label>
            </div>
            <div class="form_input_div">
                <input id="company" class="" name="company" type="text" value="Pepsi inc." />
            </div>
        </div>
        <div class="form_row_div">
            <div class="form_label_div">
                <label for="notes">Notes:</label>
            </div>
            <div class="form_input_div">
                <input id="notes" class="" name="notes" type="text" value="make contact with aliens" />
            </div>
        </div>
        <div class="form_row_div toBeRemoved">
             <h3>Customers' User</h3> 
        </div>
        <div class="form_row_div toBeRemoved">
            <div class="form_label_div">
                <label for="first_name">First Name:
                    <div class="required_field"></div>
                </label>
            </div>
            <div class="form_input_div">
                <input id="first_name" class="" name="first_name" type="text" value="TestfirstnameCustomer1" />
            </div>
        </div>
        <div class="form_row_div toBeRemoved">
            <div class="form_label_div">
                <label for="last_name">Last Name:
                    <div class="required_field"></div>
                </label>
            </div>
            <div class="form_input_div">
                <input id="last_name" class="" name="last_name" type="text"...

CSS

#addDeleteUser {
    margin-top: 36px;
}
.toBeRemoved {
    background: grey;
}

JavaScript

$(document).ready(function () {
    $('#userButton').click(function () {      
        if ($(this).data('is-delete-button') == 'true') {
            $(this).text('Delete User');
            $(this).data('is-delete-button', 'false');
            $('.toBeRemoved .form_input_div input').val('');
            $('.toBeRemoved').css('display', 'block');
        } else {
           $(this).text('Add User');
           $('.toBeRemoved .form_input_div input').val('');
           $('.toBeRemoved').css('display', 'none');
           $(this).data('is-delete-button', 'true');
        }
    });
});