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" 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 () {
            $("#button").click(function () {
                var dates2 = $("#datePicker3,#datePicker4").datepicker({
                    autoOpen: false,
                    minDate: 0,
                    changeMonth: true,
                    numberOfMonths: 1,
                    showOn: "button",
            buttonImage: "http://jqueryui.com/demos/datepicker/images/calendar.gif",
            buttonImageOnly: true,
                    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();
                    }

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