JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/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 class="field">
                <label>Date Medical Received: </label>
                <input type = "text" class = "datepicker" id = "MEDRIN" />
            </div>
            <div class="field">
                <label>Name of...

JavaScript

'use strict';

(function($) {
    $(document).ready(function() {

        //What you want is to gather together all the DOM nodes with the specified class, like so (using your IE8-compatible getElementsByClassName function):



        //then you want to iterate over them, setting each ones innerHTML property:



        $("input.datepicker").datepicker({
            dateFormat: 'MM d, yy'
        });

        //this code will set all your inputs with "datepicker" class, to appear the datepicker
        //from JqueryUI
        ///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();
            // 1. Clone the last medical report
            var template = $('#medical-report-1').clone(true);


            // 2. Change the ID
            template.attr('id', 'medical-report-' + Math.ceil(Math.random() * 100));

            // 3. Add the new medical report to the fieldset
            $('#medical-details').append(template) + ("<h2>Medical Document Number</h2>");
            template

            //4.Create Datepickers

        });
    });
})(jQuery);


//IE8
function getElementsByClassName(node, classname) {
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for (var i = 0,...