Как сделать, чтобы в таблице по двойному клику можно было изменять данные и отправлять их на сервер

Пишу проект на Flask, возникла необходимость добавить в таблицу функционал, чтобы по двойному клику можно было вносить изменения в строки. Я изучаю Python, с JS не знакома. В браузере в таблице получилось по двойному клику вносить изменения в таблицу, но на сервер приходят пустые данные: {'name_service': {}, 'car': {}, 'jeep': {}, 'minivan': {}}

Вот мой шаблон с таблицей в которой я пытаюсь по двойному клику вносить изменения price.html

<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-2 mb-4 w-75">
<button type="button" class="btn btn-outline-warning me-md-2" data-bs-toggle="modal" data-bs-target="#add">+ Добавить</button>
</div>
<div class="modal fade" id="add" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Добавить услугу</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <form action="{{ url_for('price') }}" method="post">
      <div class="modal-body">
          <div class="mb-3">
            <label for="name_service" class="col-form-label">Наименование:</label>
            <input type="text" class="form-control" name= "name_service" id="name_service">
          </div>
          <div class="mb-3">
            <label for="car" class="col-form-label">Легковой автомобиль (стоимость услуги):</label>
            <input type="text" class="form-control" name= "car" id="car">
          </div>
          <div class="mb-3">
            <label for="jeep" class="col-form-label">Джип (стоимость услуги):</label>
            <input type="text" class="form-control" name= "jeep" id="jeep">
          </div>
          <div class="mb-3">
            <label for="minivan" class="col-form-label">Минивен (стоимость услуги):</label>
            <input type="text" class="form-control" name= "minivan" id="minivan">
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
        <button type="submit" class="btn btn-primary">Сохранить</button>
      </div>
    </form>
    </div>
  </div>
</div>
<table class="table table-hover table-bordered w-75 p-3" id="editableTable">
  <thead class="table-light fs-5">
    <tr>
      <th scope="col" rowspan="2" class="text-center">#</th>
      <th scope="col" rowspan="2" class="text-center">Наименование</th>
      <th scope="col" colspan="3" scope="colgroup" class="text-center">Стоимость услуг, руб</th>
    </tr>
    <tr>
      <th scope="col" class="text-center">Легковой автомобиль</th>
      <th scope="col" class="text-center">Джип</th>
      <th scope="col" class="text-center">Минивен</th>
    </tr>
  </thead>
  <tbody class="table-group-divider fs-6">
    {% for i in price %}
    <tr>
      <th scope="row" class="text-center">{{ i.id }}</th>
      <td contenteditable="true" data-id="newName">{{ i.name_service }}</td>
      <td contenteditable="true" data-id="carPrice">{{ i.car }}</td>
      <td contenteditable="true" data-id="jeepPrice">{{ i.jeep }}</td>
      <td contenteditable="true" data-id="minivanPrice">{{ i.minivan }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>
<script>
  document.querySelectorAll('#editableTable td').forEach(cell => {
    cell.addEventListener('click', () => {
        cell.setAttribute('contenteditable', 'true');
        cell.focus();
    });
    cell.addEventListener('blur', () => {
        cell.setAttribute('contenteditable', 'false');
    });
    cell.addEventListener('keypress', event => {
        if (event.key === 'Enter') {
            event.preventDefault();
            cell.blur();
        }
    });
});
  document.addEventListener('DOMContentLoaded', function() {
  const tableRows = document.querySelectorAll('tr[data-id]');
  tableRows.forEach(row => {
    row.addEventListener('dblclick', function() {
      const id = this.dataset.id;
      const newName = prompt('Введите новое название услуги:');
      const carPrice = prompt('Введите цену для легкового автомобиля:');
      const jeepPrice = prompt('Введите цену для джипа:');
      const minivanPrice = prompt('Введите цену для минивена:');
      if (newName && carPrice && jeepPrice && minivanPrice) {
        fetch('/price/update', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ id: id, name_service: newName, car: carPrice, jeep: jeepPrice, minivan: minivanPrice })
        })
        .then(response => response.json())
        .then(data => {
          console.log(data.message);
          // Обновите данные на странице при успешном обновлении
        })
        .catch(error => console.error('Произошла ошибка:', error));
      }
    });
  });
});
</script>

В этом контроллере я пытаюсь получить измененные данные из таблицы, но переменная data содержит вот это {'name_service': {}, 'car': {}, 'jeep': {}, 'minivan': {}}

@app.route('/price/update', methods=['POST'])
@login_required
def price_update():
    data = request.get_json()
    
    price_id = data.get('id')
    name_service = data.get('name_service')
    car = data.get('car')
    jeep = data.get('jeep')
    minivan = data.get('minivan')
    if not car.isdigit() or not jeep.isdigit() or not minivan.isdigit():
        flash({'title': "Статус", 'message': "Поля 'ЛЕГКОВОЙ АВТОМОБИЛЬ', 'ДЖИП', 'МИНИВЕН' должны содержать только цифры!"}, 'error')
        return redirect(url_for('price'))

    price_obj = Price.query.get(price_id) 
    price_obj.name_service = name_service
    price_obj.car = car
    price_obj.jeep = jeep
    price_obj.minivan = minivan
    db.session.add(price_obj)
    db.session.commit()
    
    return redirect(url_for('price'))