I'm trying to display the dynamic price for each service, but I'm getting the person's value for each ride. 

Example: 

<div id="price-display">Price…</div>

 document.addEventListener('DOMContentLoaded', () => {   const serviceId = 10;     const apiUrl =      'https://macaooffroad.com/wp-admin/admin-ajax.php'     + '?action=wpamelia_api'     + '&call=/api/v1/services/' + serviceId;

  let priceBase = 0;   const priceEl = document.getElementById('price-display');

  // 1) Traer precio base del servicio   fetch(apiUrl, {     method: 'GET',     headers: {       'Content-Type': 'application/json',       'Amelia': 'Api-Key'     }   })   .then(res => res.json())   .then(json => {     priceBase = json.data.service.price;     updateDisplay();  // total inicial     bindQuantityListener();    })   .catch(err => {     console.error('Error al obtener el precio:', err);     priceEl.innerText = 'Error al cargar precio';   });

  // 2) Función para recalcular y mostrar   function updateDisplay() {     // leemos directamente la cantidad que Amelia ya está usando     const qtyEl = document.querySelector('input[name="persons"]');     const cantidad = parseInt(qtyEl.value, 10) || 1;     const total = priceBase * cantidad;     priceEl.innerText = `Total: $${total.toFixed(2)}`;   }

  // 3) Listener sobre el campo que Amelia inyecta   function bindQuantityListener() {     const qtyEl = document.querySelector('input[name="persons"]');     if (!qtyEl) {       console.warn('No encontré el campo de “persons” de Amelia');       return;     }     // con 'input' para cambios al vuelo     qtyEl.addEventListener('input', updateDisplay);   } }); 

[Log] Initial readings of "persons" (horseback-ride, line 1006) [Log] By name: – null (horseback-ride, line 1007) [Log] By class: – null (horseback-ride, line 1008) [Log] By aria: – null (horseback-ride, line 1009) [Log] By shadow: – null (horseback-ride, line 1010) [Log] By editable: – null (horseback-ride, line 1011)