Ссылка на пользовательский элемент управления в нескольких формах

Question

Я создал пользовательский элемент управления для текстового поля с кнопкой, как показано ниже:

var dxBarCodeText = $("#dx-barcode-text").dxTextBox({
    placeholder: "Scan Barcode",
    value: "",
    //stylingMode: "filled",
    showClearButton: true,
    buttons: [{
        name: "butScan",
        location: "before",
        options: {
            icon: "now-ui-icons media-1_camera-compact",
            type: "default",
            onClick: function() {
        cordova.plugins.barcodeScanner.scan(
        function (result) {
            dxBarCodeText.option("value", result.text);
        },
        function (error) {
            DevExpress.ui.notify("Scanning failed: " + error);
        }
    );
            }
        }
    }]
}).dxTextBox("instance");

Я хотел бы теперь ссылаться на пользовательский элемент управления в моем представлении / форме как поле и получать соответствующее значение:

dxBarCodeText.option('value')

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

        <div class="dx-field">
            <div class="dx-field-label">ScanBarCode</div>
            <div class="dx-field-value">
                <div id="dx-barcode-text" name=""></div>
            </div>
        </div>