Ошибка при всплытии событий и отправке запроса ( fetch ) на сервер

На страничке есть форма с двумя кнопками и списком select. Хочу сделать так, чтобы при клике на одну из кнопок скрипт js отправлял запрос на сервер, а из полученного ответа формировал элементы option списка select. В зависимости от того на какую кнопку кликнул пользователь список select заполняется уникальными option (в моем случае или видами фруктов, или овощей).

1. скрипт js

   let elements = document.querySelectorAll('.radio');
   let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
   
   elements.forEach( element => {
           element.addEventListener('click', function (event) {
               fetch("http://site/categories", {
                   method: 'POST',
                   headers: {
                       'Content-Type': 'application/json;charset=utf-8',
                       'X-CSRF-TOKEN': csrfToken
                   },
                   body: JSON.stringify({ "category": event.target.value })
               })
                   .then(response => response.json())
                   .then(function (data) {
                       let element = document.forms[0]['category'];
                       let categories = Object.values(data);
                       
                       categories.map( function (item) {
                            let option = document.createElement('option');
                            let value = document.createTextNode(item);
                            option.appendChild(value);
                            element.appendChild(option);
                        });
   
                   });
   
           })
       });

   фрагмент разметки
   
    <form method="POST">
    
      <div class="radio">
         <div>
             <label for="fruits">фрукты</label>
             <input type="radio" id="fruits" value="fruits">
         </div>
   
         <div>
             <label for="vegetables">овощи</label>
             <input type="radio" id="vegetables" value="vegetables">
         </div>
     </div>
     
     <div>
       <label for="category">категории</label>
       <select name="category" id="category"></select>
     </div>
     
   </form>

серверный скрипт (Laravel)

public function categories(Request $request) {

    ($request->input('category') == 'fruits')
        ? $categories = Category::where('category', 'fruits')
            ->pluck('items')
            ->unique()
        : $categories = Category::where('category', 'vegetables')
            ->pluck('items')
            ->unique();

    return response()->json($categories);

}

Суть проблемы: При клике например на радио кнопку фрукты, сервер отдает почему-то два json сериализованых обьекта и фрукты и по овощи:

{0: "яблоки", 3: "груши", 5: "сливы"}
{1: "картошка", 2: "морковь", 4: "капуста"}

И что самое печальное - список select заполняется значениями только при первом клике на любую из кнопок. Сколько бы я потом не нажимал на вторую кнопку с другими категориями - список select не меняется.

Вопросы:

1. Почему клик на одну кнопку возвращает два json обьекта, ведь должен только один?
2. Почему после первого клика по одной из кнопок, не рендерится список select новыми значениями?

Спасибо!