JSFiddle - React, Tailwind, and code Playground

by brianlmerritt

HTML

<div id="2015-09-17" class="availability_row clearfix">
    <div class="availability_row_day"><span class="green">Thu Sep 17</span>

    </div>
    <div class="availability_row_not_available"><a class="im_not_available" title="Delete all availabilty for this day" href=""><span class="red">I'm not available</span></a>

    </div>
    <div class="availability_row_available"><a class="im_available" title="Add availability for this day" href=""><span class="green">I'm available</span></a>

    </div>
    <div class="availability_row_date" id="2015-09-17_1">
        <div class="availability_row_date_row clearfix">
            <div class="availability_row_date_from">
                <div class="availability_row_date_from_row clearfix">
                    <div class="availability_row_date_from_left">From:</div>
                    <div class="availability_row_date_from_right">
                        <input title="Type your availability start time here" type="text" value="0:00" name="Thu Sep 17_from_1" id="Thu Sep 17_from_1" class="time_input">
                    </div>
                </div>
            </div>
            <div class="availability_row_date_remove"><a class="availability_remove_link" title="Delete this availability" href="">&nbsp;</a>

            </div>
            <div class="availability_row_date_to">
                <div class="availability_row_date_to_row clearfix">
                    <div class="availability_row_date_to_left">To:</div>
                    <div class="availability_row_date_to_right">
                        <input title="Type your availability end time here" type="text" value="24:00" name="Thu Sep 17_to_1" id="Thu Sep 17_to_1" class="time_input">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="availability_row_more"><a title="Add more availability" href="">Add more time</a>

    </div>
    <div class="availability_row_date" id="">
        <div...

CSS

.red {
    color:red
}
.green {
    color:green
}
.gray {
    color:gray
}

JavaScript

$('.im_not_available').click(function (e) {
    e.preventDefault(); // user has clicked "I'm not available" in one of the availability rows
    var availability_row = $(this).closest('.availability_row'); //select the row
    // var availability_date = availability_row.attr('id'); // get the date
    var availability_span = availability_row.children('span');
    if (availability_span.hasClass("red")) { // we already have no elements in this array
        return; // ignore click
    } else {
        var availability_date = availability_row.children('span').text();
        var proceed = confirm('Are you sure you want to remove all availability on ' + availability_date + ' ?');
        if (proceed) {
            remove_availability(availability_row);
        }
    }
})

$('.im_available').click(function (e) { // user has clicked "I'm available" in one of the availability rows
    e.preventDefault();
    var availability_row = $(this).closest('.availability_row'); //select the row
    // var availability_date = availability_row.attr('id'); // get the date
    if (availability_row.children('span').hasClass("green")) { // we already have elements in this array
        return; // ignore click
    } else {
        append_availability(availability_row);
    }
})


function remove_availability(availability_row) {
    var availability_date = availability_row.attr('id'); // get the date
    var request = {
        "request": 'remove_availability',
        "change_date": availability_date
    };
    send_availability_request(request);
    //todo remove the html elements

}

function append_availability(availability_row) {
    var availability_date = availability_row.attr('id'); // get the date
    var from_id = availability_date + '_from_1';
    var to_id = availability_date + '_to_1';
    var append_html = '<div class="availability_row_date" id=""><div class="availability_row_date_row clearfix"><div class="availability_row_date_from"><div...