JQuery - Как изменить диалог на элементе страницы

Question

В настоящее время у меня есть диалоговое окно, которое открывается, когда вы выбираете кнопку с цифровой панелью для ввода записей. То, что я хотел бы сделать, это иметь это на странице, а не открывать диалог. Я попытался изменить диалог на .data и удалил его полностью, но он не работает в этом состоянии. Он работает только в том случае, если он открывается как диалоговое окно.

Вот мой JavaScript:

 if ($("#hmi-keypad-numeric").length !== 0) {                                                // Don't run code if keypad HTML doesn't exist;
            var decimalSep = $("#hmi-keypad-numeric .hmi-keypad-decimalsep").text().trim();

            var targetProperty;
            var inputBox;
            var entryMin;
            var entryMax;

            var numericKeypad = $("#hmi-keypad-numeric").dialog({
                autoOpen: false,
                resizable: false,
                height: "auto",
                width: 450,
                modal: false,
                buttons: {

                    Ok: function () {
                        var inputValue = stringToNumber(inputBox.val(), decimalSep);
                        if (inputValue >= entryMin && inputValue <= entryMax) {
                            targetProperty.text(inputValue);
                            targetProperty.trigger("hmi:user-entry");
                            numericKeypad.dialog("close");
                        }
                        else {
                            inputBox.val(inputValue);
                            inputBox.addClass("error_highlight");
                        }
                    },

                    Cancel: function () {
                        numericKeypad.dialog("close");
                    }
                }
            });

            $(".hmi-keypad-button").on("click", function () {
                var button = $(this);
                var inputBox = button.closest(".hmi-keypad-container").children("input");
                var inputString = inputBox.val();

                if (button.hasClass("hmi-keypad-backspace"))
                    inputBox.val(inputString.substring(0, inputString.length - 1));
                else if (button.hasClass("hmi-keypad-negate"))
                    inputBox.val(inputString.charAt(0) == "-" ? inputString.slice(1) : ("-" + inputString));
                else
                    inputBox.val(inputString + button.text());
            });

            $("button[data-hmi-button-type='numericEntry']").on("click", function () {
                targetProperty = $(this).closest('.hmi-control').find('div[data-hmi-prop-name=\'entryValue\']');
                entryMin = Number(targetProperty.siblings("[data-hmi-prop-name='entryMin']").text() || "-1e10");
                entryMax = Number(targetProperty.siblings("[data-hmi-prop-name='entryMax']").text() || "1e10");

                var titleText = targetProperty.siblings("[data-hmi-prop-name='controlTitle']").text() || "Enter A Value:";
                numericKeypad.dialog("option", "title", titleText);

                inputBox = $("#hmi-keypad-numeric").children("input");
                inputBox.val("");
                inputBox.removeClass("error_highlight");
                numericKeypad.dialog("open");
            });
        }

Вот диалоговое окно, на котором я хочу быть c на странице:

<div class="ui-corner-all ui-widget-content" aria-describedby="hmi-keypad-numeric" aria-labelledby="ui-id-1">
    <div id="hmi-keypad-numeric" class="hmi-keypad-container">
        <input class="hmi-keypad" type="text">
            <table id="keyboardNumber" class="hmi-keypad" style="display: block;">
                <tbody>
                    <tr class="jsKeyboardRow">
                        <td class="button"><div class="hmi-keypad-button key">7</div></td>
                        <td class="button"><div class="hmi-keypad-button key">8</div></td>
                        <td class="button"><div class="hmi-keypad-button key">9</div></td>
                        <td class="button button_del"><div class="hmi-keypad-button hmi-keypad-backspace key key_del">Delete</div></td>
                    </tr>
                    <tr class="jsKeyboardRow">
                        <td class="button"><div class="hmi-keypad-button key">4</div></td>
                        <td class="button"><div class="hmi-keypad-button key">5</div></td>
                        <td class="button"><div class="hmi-keypad-button key">6</div></td>
                        <td class="button button_enter"><div class="key key_cancel">Cancel</div></td>
                    </tr >
                    <tr class="jsKeyboardRow">
                        <td class="button"><div class="hmi-keypad-button key">1</div></td>
                        <td class="button"><div class="hmi-keypad-button key">2</div></td>
                        <td class="button"><div class="hmi-keypad-button key">3</div></td>
                    </tr>
                    <tr  class="jsKeyboardRow">
                        <td class="button"><div class="hmi-keypad-button hmi-keypad-negate key">+/-</div></td>
                        <td class="button"><div class="hmi-keypad-button key">0</div></td>
                        <td class="button"><div class="hmi-keypad-button hmi-keypad-decimalsep key">.</div></td>
                        <td class="button button_enter"><div type="button" class="key key_enter">OK</div></td>
                    </tr>
                </tbody>
            </table>         
        </div>
    </div>

На странице будет несколько входов, поэтому мне нужно будет выбрать один, прежде чем я введу значение. У меня есть кнопка, но это действительно не нужно, если нет диалога. Выбор отображения контента будет работать. Ниже показано, как будет выглядеть один из предметов.

<div id="MyNumericEntry" class="hmi-control card d-block md-4" data-hmi-control-type="numericEntry" data-hmi-scan-level="2">
        <div class="hmi-property" data-hmi-prop-name="controlTitle" data-hmi-prop-expr="">My Test Value</div>
        <div class="hmi-property" data-hmi-prop-name="buttonText" data-hmi-prop-expr="">Change</div>
        <div class="hmi-property" data-hmi-prop-name="entryValue" data-hmi-prop-target="{EntryValue}" data-hmi-prop-data-type="float" data-hmi-prop-expr="{value} / 4">1.2345</div>
        <div class="hmi-property" data-hmi-prop-name="entryMin" data-hmi-prop-expr="">0</div>
        <div class="hmi-property" data-hmi-prop-name="entryMax" data-hmi-prop-expr="">50</div>
        <div class="hmi-property" data-hmi-prop-name="displayValue" data-hmi-prop-places="4" data-hmi-prop-expr="{EntryValue} * 4">8</div>
        <div class="hmi-property" data-hmi-prop-name="displayFormat" data-hmi-prop-expr="{Metric} ? {metricLength} : {imperialLength}">0.00</div>
        <div class="hmi-property" data-hmi-prop-name="minWarn" data-hmi-prop-expr="">4</div>
        <div class="hmi-property" data-hmi-prop-name="minGood" data-hmi-prop-expr="">6</div>
        <div class="hmi-property" data-hmi-prop-name="maxGood" data-hmi-prop-expr="">10</div>
        <div class="hmi-property" data-hmi-prop-name="maxWarn" data-hmi-prop-expr="">12</div>
        <div class="card-body" data-hmi-redraw-func="redrawNumericEntry">
            <div class="card-title hmi-content-title"> No Redraw Yet </div>
            <div class="card-text hmi-content-display"> No Redraw Yet </div>
            <button type="button" class="hmi-button-entry btn btn-block btn-control" data-hmi-button-name="mainButton" data-hmi-button-type="numericEntry">Change</button>

        </div>
    </div>

К сожалению, мои навыки javascript не очень хороши. Спасибо за вашу помощь!