Загрузить данные в поле ввода: JQuery

Question

Может быть, это дублирующий вопрос, но я не получил ответа.

У меня есть случайное значение, которое я получаю с помощью функции.

<a onclick="addProductPricing({{ $customer->id }})" id="addP">Add</a>

addProductPricing = function (customerId) {          
      $('#customerId').val(customerId);
};

У меня есть скрытое поле. Я хочу связать customerId в это. Но не работает.

Это поле находится в Bootstrap Modal

<input type="hidden" name="customerId" id="customerId" value="">

Ошибка: Пока я вижу значение с alert, оно показывает Object Object

console.log:

0: input#customerId
accept: ""
accessKey: ""
align: ""
alt: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: type, 1: name, 2: id, 3: value, type: type, name: name, id: id, value: value, length: 4}
autocapitalize: ""
autocomplete: ""
autofocus: false
baseURI: "http://localhost:8000/admin/allCustomer"
checked: false
childElementCount: 0
childNodes: NodeList []
children: HTMLCollection []
classList: DOMTokenList [value: ""]
className: ""
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
contentEditable: "inherit"
dataset: DOMStringMap {}
defaultChecked: false
defaultValue: "3"
dir: ""
dirName: ""
disabled: false
draggable: false
files: null
firstChild: null
firstElementChild: null
form: form.form-horizontal.m-t-20
formAction: "http://localhost:8000/admin/allCustomer"
formEnctype: ""
formMethod: ""
formNoValidate: false
formTarget: ""
height: 0
hidden: false
id: "customerId"
incremental: false
indeterminate: false
innerHTML: ""
innerText: ""
inputMode: ""
isConnected: true
isContentEditable: false
labels: null
lang: ""
lastChild: null
lastElementChild: null
list: null
localName: "input"
max: ""
maxLength: -1
min: ""
minLength: -1
multiple: false
name: "customerId"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: div.form-group.col-md-12
nextSibling: text
nodeName: "INPUT"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 0
offsetLeft: 0
offsetParent: null
offsetTop: 0
offsetWidth: 0
onabort: null
onauxclick: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectstart: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
onvolumechange: null
onwaiting: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwheel: null
outerHTML: "<input type="hidden" name="customerId" id="customerId" value="3">"
outerText: ""
ownerDocument: document
parentElement: div.form-row.product-pricing-div
parentNode: div.form-row.product-pricing-div
pattern: ""
placeholder: ""
prefix: null
previousElementSibling: input
previousSibling: text
readOnly: false
required: false
scrollHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 0
selectionDirection: null
selectionEnd: null
selectionStart: null
shadowRoot: null
size: 20
slot: ""
spellcheck: true
src: ""
step: ""
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: 0
tagName: "INPUT"
textContent: ""
title: ""
translate: true
type: "hidden"
useMap: ""
validationMessage: ""
validity: ValidityState {valueMissing: false, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}
value: "3"
valueAsDate: null
valueAsNumber: NaN
webkitEntries: []
webkitdirectory: false
width: 0
willValidate: false
__proto__: HTMLInputElement
length: 1
__proto__: Object(0)

Модальное тело:

<!-- Modal -->
<div class="modal fade" id="productPricing" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <form class="form-horizontal m-t-20"  method="POST" data-toogle="validator" id="addPP-form">
                    @csrf {{ method_field('POST') }}
                    <?php
                    $i = 0;
                    ?>

                    @foreach($products as $product)
                        <div class="form-row product-pricing-div">

                            <input type="hidden" name="productId[]" value="{{ $product->id }}">

                            <input type="hidden" name="productName[]" value="{{ $product->productName }}">
                            <input type="hidden" name="customerId" id="customerId" value="">

                            <div class="form-group col-md-12" style="margin-bottom: 0px">
                                <h5 class="right-align">{{ ++$i }}.{{$product->productName }}</h5>
                            </div>

                            <!-- Phone Number -->

                            <div class="form-group col-md-12">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-success text-white" ><i class="ti-money"></i></span>
                                    <input type="number" step="any" class="form-control form-control-lg" placeholder="Enter Price for Product {{ $i }}" name="productPrice[]" value="{{ old('customerPhone') }}">
                                </div>
                            </div>
                        </div>
                    @endforeach


                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button class="btn text-center bg-success style-je518ohhlink" id="addPPbtn" type="submit"></button>
                    </div>
                </form>

            </div>



        </div>
    </div>
</div>