JSFiddle - React, Tailwind, and code Playground

by 76484

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div id="claimdetails">
    <form action="">
        <fieldset>
            <legend>Claimant Details</legend>
            <div class="field">
                  <label for="BPCIN">Start Date: </label>
                  <input type="text" class="datepicker" id="BPCIN" />
            </div>
            <div class="field">
                <label for="LWPIN">Last Week of Benefits Paid: </label>
                <input type="text" class="datepicker" id="LWPIN" />
            </div>
            <div class="field">
                <label>Total Weeks of Sickness Benefits Paid: </label>
                <select id="TWSPIN">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                </select>
            </div>
        </fieldset>
    </form>
</div>
         
<div class="medicaldetailsbox">
    <fieldset id="medical-details">
        <legend> Medical Details </legend>
        <div id="medical-report-1"></div>
    </fieldset>
    <a href="#" id="new-report">Add New Report</a>
    <input id="Generate" type="button" value="Generate!" />
    <article id="OUTDOC">
        <h2>Document 1: </h2>
        <p>
            The client was sent an a letter on "Date" requesting...

CSS

.report-form {
    background: #efefef;
    margin: 10px 0;
    padding: 10px;
}

JavaScript

'use strict';

jQuery(function($) {
    /* Populate #medical-report-1 with form template and initialize its datepickers. */
    $('#medical-report-1')
        .html($('#FormTemplate').html())
        .find('input.datepicker').datepicker({ dateFormat: 'MM d, yy' });
    
    // this is retroactive datepicker
    $("input.retrodatepicker").datepicker({ 
        dateFormat: 'MM d, yy',
        stepMonths: 3,
        defaultDate: "-2MM",
        numberOfMonths: 3,
        showOtherMonths: true
    });
    
    $("#relativedatepicker").datepicker({
        numberOfMonths: 3,
        
        beforeShow: function() {
            //get date startDate is set to
            var startDate = $("#3months").datepicker('getDate');
            //if a date was selected else do nothing
            
            //startDate.setMonth(startDate.getMonth() + 1);
            $(this).datepicker('option', 'defaultDate',startDate);
        }
    });
    
    $('#new-report').on('click', function(event) {
        event.preventDefault();
        
        var $container = $('<div></div>');
        $container.attr('id', 'medical-report-' + Math.ceil(Math.random() * 100));
        
        var $form = $($('#FormTemplate').html());
        $container.append($form);
        $container.find('.datepicker').datepicker({ dateFormat: 'MM d, yy' });
        
        // 3. Add the new medical report to the fieldset
        $('#medical-details').append($container)+("<h2>Medical Document Number</h2>");
    });
    
    $('#Generate').on('click', generateReportSummaries);
});

    
//IE8
function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

function generateReportSummaries(){
    
    /* Get a jQuery wrapped collection of all .report-form elements. */
    var $forms = $('.report-form');
 ...