Inline table editing with select2 not working - php

Question

Hi can somebody please guide me how to implement inline table edit with select2 in laravel livewire?
I am having problem in my select as I can change the selected option in my select2 but the value I am getting upon submitting the form is the same as the original value.
Please see code below.
Table
#foreach ($purchaserequestitems as $index => $purchaserequestitem)
<tr >
<td><label class='label label-primary'>{{ $loop->iteration }}</label></td>
<td>
#if($editedPRItemsIndex !== $index)
<label>
{{ $purchaserequestitem['item']['name'] }}
</label>
<br/>
<small>
<label>{{ $purchaserequestitem['item']['code'] }}</label>
</small>
#else
<select wire:model.defer="purchaserequestitems.{{ $index }}.item_id" data-index="{{ $index }}" wire:change="getUomByItemId" class="form-control select2 item">
<option value="">-- Please Select -- </option>
#foreach ($items as $item)
<option value="{{ $item->id }}" >{{ $item->name }}</option>
#endforeach
</select>
#endif
</td>
<td>
#if ($editedPRItemsIndex !== $index)
{{ $purchaserequestitem['quantity'] }}
#else
<input type="text" wire:model.defer="purchaserequestitems.{{ $index }}.quantity" class="form-control">
#endif
</td>
<td>
#if ($editedPRItemsIndex !== $index)
{{ $purchaserequestitem['itemuomconversion']['unitmeasure']['code'] }}
#else
<select wire:model.defer="purchaserequestitems.{{ $index }}.item_uom_conversion_id" id="edituom" class="form-control select2">
<option value="">-- Please Select -- </option>
#foreach ($uom_options as $uom_option)
<option value="{{ $uom_option->id }}">{{ $uom_option->unitmeasure->code }}</option>
#endforeach
</select>
#endif
</td>
<td>
#if ($editedPRItemsIndex !== $index)
{{ $purchaserequestitem['comment'] }}
#else
<textarea wire:model.defer="purchaserequestitems.{{ $index }}.comment" class="form-control"></textarea>
#endif
</td>
<td>
<span class='pull-right'>
#if ($editedPRItemsIndex !== $index)
<button
class='btn btn-primary btn-sm rounded-0 py-0'
wire:click.prevent="editPRItem({{ $index }})">
Edit
</button>
<button
wire:click="deleteConfirm({{ $purchaserequestitem['id'] }})"
class='btn btn-danger btn-sm rounded-0 py-0'>
Delete
</button>
#else
<button wire:click.prevent="update({{ $index }})" class="btn btn-primary">Update</button>
#endif
</span>
</td>
</tr>
#endforeach
JS that sets the value of the select
$('.item').on('change', function (e) {
let data = $(this).val();
let idx = $(this).data('index');
#this.set(`purchaserequestitems.${idx}.item_id`, data);
});
Function that updates the data
public function update($prItemIndex)
{
$pritem = $this->purchaserequestitems[$prItemIndex] ?? NULL;
if(!is_null($pritem)){
$editedItem = PurchaseRequestItem::find($pritem['id']);
if($editedItem){
// dd($pritem);
$editedItem->update([
'item_id' => $pritem['item_id'],
'comment' => $pritem['comment'],
'quantity' => $pritem['quantity'],
'item_uom_conversion_id' => $pritem['item_uom_conversion_id']
]);
}
}
$this->editedPRItemsIndex = null;
}
Any help would be appreciated, or if you guys have any other way to implement an inline table editing with a select2 in it. Thank you
Tried to put the js inside an eventlistener but everytime I change the an option on the select box, it will just return to its original value.