Change style based on selected value with dynamic IDs Laravel

I have this blade file which is using Laravel livewire. I have added dynamic add remove function to a select field and I wanna preview the font family based upon the selected value. The code I wrote works well but every preview text gets reset when I add a new select field. What am I doing wrong?

@foreach($fontinputs as $key => $value)
 <select class="form-select" id="font.{{ $value }}">
   <option value="PT Sans" style="font-family:'PT Sans'">PT Sans</option>
   <option value="Roboto" style="font-family:'Roboto'">Roboto</option>
   <option value="Source Sans" style="font-family:'Source Sans'">Source Sans</option>
   <option value="Lato" style="font-family:'Lato'">Lato</option>
   <option value="Montserrat" style="font-family:'Montserrat'">Montserrat</option>
 </select>

 <button class="btn btn-danger btn-sm" wire:click.prevent="removeFont({{$key}})">Remove</button>
                                
 <p id="fontpreview.{{ $value }}" class="p-3  fontpreview">Preview Text Here</p>

  <script>
   var obj{{ $value }} = document.getElementById('fontpreview.{{ $value }}');

   document.getElementById('font.{{ $value }}').addEventListener('change', function(){]

   obj{{ $value }}.style.setProperty("font-family", this.value, "important")

   });
 </script>
@endforeach

Here is a preview of the issue