Laravel livewire - associate an array of selected itels into another array - php

Question

I hope you are well ? I have a feature to integrate that should allow users to boost articles based on a certain number of keywords. The principle is that the user selects one or more articles and with each selected article, he associates keywords which are also made via selections. My concern is that I can't combine the chosen keywords with each selected article. I use Laravel and Livewire.
my selection of articles and keywords
In my livewire component
public $allData;
public $selectedProducts = [];
public $selectedWords = [];
public $selectAll = false;
public bool $bulkDisabled = false;
public $selectedProductIndex = null;
public function updatedSelectedProducts($productIndex)
{
$this->selectedProductIndex = $productIndex;
if ($this->selectedProducts) {
$this->bulkDisabled = true;
} else {
$this->bulkDisabled = false;
}
if (count($this->selectedProducts) >= $this->pack->nombre_article) {
$this->limiteAtteint = true;
} else {
$this->limiteAtteint = false;
}
}
public function updatedSelectedWords($value)
{
$this->allData =
[
(object) array('key' =>[ $this->selectedProductIndex], 'key2' => $value),
];
}
When I dump
dd
But I would like to have something like this as in the picture
array:2 [▼
0 => array:2 [▼
"key" => array:1 [▼
0 => array:2 [▼
0 => "product 1"
]
]
"key2" => array:1 [▼
0 => "shoes",
1 => "clothes"
]
],
1 => array:2 [▼
"key" => array:1 [▼
0 => array:2 [▼
0 => "product 2"
]
]
"key2" => array:1 [▼
0 => "shoes"
]
]
]
My livewire component blade file
<table class="table table-bordered table-striped table-hover dataTable js-exportable">
<thead>
<tr>
<th></th>
<th>Keywords</th>
<th>Product name</th>
<th>Category</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Keywords</th>
<th>Product name</th>
<th>Category</th>
<th>Price</th>
</tr>
</tfoot>
<tbody>
#foreach ($articles as $article)
<tr>
<td>
<input wire:ignore type="checkbox" class="filled-in chk-col-red" value="{{$article->id}}" wire:model="selectedProducts"
/>
<label for="md_checkbox_21{{$article->id}}"></label>
</td>
<td>
<section style="position: absolute" wire:ignore>
<div class="row d-flex justify-content-center mt-0">
<div class="col-md-12">
<select id="choices-multiple-remove-button" name="selectedWords{{$article->id}}" wire:model="selectedWords" class="selectpicker" multiple aria-label="Default select example" data-live-search="true" placeholder="Select up to 3 tags" multiple>
{{-- $mots for workeys --}}
#foreach ($mots as $mot)
<option value="{{$mot->intitule}}">{{$mot->intitule}}</option>
#endforeach
</select>
</div>
</div>
</section>
</td>
<td> <a class="black-text" href="{{ route('articles.show', $article) }}">
{{ ucFirst($article->intitule) }} </a></td>
<td> <a class="black-text" href="{{ route('articles.show', $article) }}">
#if ($article->categories)
#foreach ($article->categories as $categorItem)
{{ $categorItem->categorie->intituleCategorie }}
#endforeach
#endif
</a></td>
<td> <a class="black-text"
href="{{ route('articles.show', $article) }}">{{ formatMontant($article->prix) }}
</a></td>
</tr>
#endforeach
</tbody>
</table>