livewire set value of hidden input on button click

Question

I want to do something seemingly simple in livewire. I want to set the value of a hidden input field based on an attribute from a button that's clicked. I can console.log the ID I'm looking for, and it works. I can see that the value of the input is updated in the UI, however, it's updated to what appears to be the Livewire hash or ID of the element. I just want the regular id. Am I doing this wrong?

here's the link that's clicked, and I want to put the $status->id into the hidden input:

<a role="button" id="task_status_{{ $status->id }}" class="add-task-btn"><i class="mdi mdi-plus-circle h5 text-muted" data-bs-toggle="modal" data-bs-target="#createOrUpdateTask"></i></a>

The input:

<input id="status_id_input" value="" hidden>

The js:

 $('.add-task-btn').on('click', function(el) {
                    let status = el.currentTarget.id.split('_')[2];
                    $("input[id=status_id_input]").val(status);
                });

Maybe I'm not thinking about this in a livewire-y way, but this is something I've done countless times in the past.

If I console.log the status I get a number, like 2, for example.

But when I look at the markup, the value of the input is like this:

wTz06yjQoQErKT3p36EKP4zZwWjJgIsUOttX4URL

I was wanting to do this without a round-trip to the server since it's just a simple thing.

Answer 1

Change your code from this

<input id="status_id_input" value="" hidden>

To this

<input id="status_id_input" value="yourvalue" type="hidden">