JSFiddle - React, Tailwind, and code Playground

by geortravel

HTML

<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 alt="[php snippet=37]" src="http://res.cloudinary.com/wego/image/upload/c_fit,w_80,h_27/flights/airlines_rectangular/[php snippet=37].png">
                            </td>
                            <td width="20%">Flight No.: <strong>[php...

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 current_id = 1;
$('#btn').click(function () {
    nextElement($('#Guest'));
    calculate();
});

function nextElement(element) {
    var newElement = element.clone();
    var id = current_id + 1;
    current_id = id;
    if (id < 10) id = "0" + id;
    newElement.attr("id", element.attr("id").split()[0] + "_" + id);
    var field = $('input', newElement).attr("id");
    $('input', newElement).attr("id", field.split()[0] + "_" + id);
    $('input', newElement).attr("name", field.split()[0] + "_" + id);
    $("legend", newElement).text('Guest ' + current_id);
    newElement.appendTo($("#details"));
    var numItems = $('.Guest').length;
    $("#guest").text(numItems + " Guests X");
}

function calculate() {
    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.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
    $('#taxesfees').html(ValMarkUp.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
    $('#gdsfee').html(GDSFee.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1'));
    $('#pricetotal').html(PriceTotal.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'));
    $(function() {
    $( "#datepicker" ).datepicker();
  });