JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css">
<input type="button" value="addclass" id="button">
    <div id="order-popup" style="display:none;" class="popup-content already-ordered">
        <input type="text" value=""/><br/>
        <input type="text" id="datePicker3" name="datepickerFrom" value="">
        <br/>
        <input type="text" id="datePicker4" name="datepickerTo" value="" style="margin-top:10px;margin-left:17px">
        </form>
    </div>

JavaScript

$(document).ready(function() {
    var dates2 = $("#datePicker3,#datePicker4").datepicker({
        autoOpen: false,
        minDate: 0,
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function(selectedDate) {
            var option = this.id == "datePicker3" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(
                instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
            dates2.not(this).datepicker("option", option, date);
            calculate_total_price();
        }

    }); ///
    $("#button").click(function() {

        $("#order-popup").dialog();
        $("#order-popup").show();
    });
});