JSFiddle - React, Tailwind, and code Playground

by geortravel

HTML

<script type="text/javascript" src="http://opensource.teamdf.com/number/jquery.number.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="twelvecol column">
    <div class="ninecol column">
        <div class="bar-bold">
             <h1 class="headline-bar">Flight Summary</h1> 
            <div class="inner">
                <div class="itinerary">
                    <legend>Inbound - <strong>[php snippet=28]</strong> 
                    </legend>
                    <table width="100%">
                        <tr>
                            <td width="30%">Airline:
                                <img alt="[php snippet=36]" src="http://res.cloudinary.com/wego/image/upload/c_fit,w_80,h_27/flights/airlines_rectangular/[php snippet=36].png">
                            </td>
                            <td width="20%">Flight No.: <strong>[php snippet=38]</strong> 
                            </td>
                            <td width="20%">Origin: <strong>[php snippet=27]</strong> 
                                <br>Depart Time: <strong>[php snippet=40]</strong> 
                            </td>
                            <td width="30%">Destination: <strong>[php snippet=29]</strong>  <em>[php snippet=44]</em> 
                                <br>Arrive Time: <strong>[php snippet=43]</strong> 
                                <br>Duration: <em>[php snippet=47] </em> 
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="separator"></div>
                <div class="itinerary">
                    <legend>Outbound - <strong>[php snippet=30]</strong> 
                    </legend>
                    <table width="100%">
                        <tr>
                            <td width="30%">Airline:
                                <img...

CSS

/*this is in midway template*/
 .last {
    margin-right: 0px!important;
}
.twelvecol {
    width: 100%;
}
.threecol {
    width: 22.05%;
}
.column {
    margin-right: 3.8%;
    float: left;
    min-height: 1px;
}
.ninecol {
    width: 74.05%;
}
/*copied from expedia*/
 .inner {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgb(255, 255, 255);
    background-image: none;
    background-origin: padding-box;
    background-size: auto;
    border-bottom-color: rgb(51, 51, 51);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(51, 51, 51);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(51, 51, 51);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(51, 51, 51);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: none;
    border-top-width: 0px;
    color: rgb(51, 51, 51);
    display: block;
    font-family: arial, helvetica, clean, sans-serif;
    font-size: 12px;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 16px;
    vertical-align: baseline;
}
.bar-bold {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgb(255, 255, 255);
    background-image: none;
    background-origin: padding-box;
    background-size: auto;
    border-bottom-color: rgb(0, 51, 102);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
 ...

JavaScript

$(function () {
    calculate();

});
var cloneCntr = 2;
$('#btn').click(function () {
    nextElement();
    calculate();
});

function nextElement() {
    var clone = $("#Guest").clone(false);
    // change all id and name values to a new unique value by adding "_cloneX" to the end
    // where X is a number that increases each time you make a clone
    $("*", clone).add(clone).each(function () {
        if (this.id) {
            this.id = this.id + "_" + cloneCntr;
        }
        if (this.name) {
            this.name = this.name + "_" + cloneCntr;
        }
        if (this.value) {
            this.value = "";
        }
    });

    $("legend", clone).text('Guest ' + cloneCntr);
    ++cloneCntr;
    var additionalguest = $('.Guest').length;
    if (additionalguest > 8) alert('Please Use Special Request for Additonal Guest'); // stop clonning
    if (additionalguest > 8) return false; // stop clonning
    clone.appendTo($("#details"));
}

function calculate() {
    var numItems = $('.Guest').length;
    $("#guest").text(numItems + " Guests X");
    $('.datepicker').removeClass('hasDatepicker').datepicker({
        changeMonth: true,
        changeYear: true
    });
    var GetValue = parseFloat($('#flightnett').html().replace(',', '')) || 0;
    var numItems = $('.Guest').length;
    var ValMarkUp = GetValue * 0.07;
    var GDSFee = GetValue * 0.03;
    var WithMarkUpPice = GetValue + ValMarkUp + GDSFee;
    var PriceTotal = WithMarkUpPice * numItems;
    $('#totalfare').html(WithMarkUpPice);
    $('#taxesfees').html(ValMarkUp);
    $('#gdsfee').html(GDSFee);
    $('#pricetotal').html(PriceTotal);
    $('span.number').number( true, 2 )
}