Tengo varios cuadros de selección que tienen el mismo nombre. En este momento, cuando selecciono el valor del primer cuadro de selección, lo envío y actualizo la base de datos. Cuando selecciono un elemento en otro cuadro de selección, envío el valor del primero. Siento que el javascript no está bien. ¿Alguna idea de lo que está mal?

Aquí está mi html:

 <?php foreach ($result as $row): ?> <select class="form-control" name="category[]" required> <option value="" disabled selected>Select The Category </option> <option value="station">Station</option> <option value="equipment">Tools/Equipment</option> <option value="supplies">Supplies</option> </select> <input id="taskID" value="<?php echo $row['id']; ?>" hidden></input> <?php endforeach; ?>

jquery:

 $(document).on('change', 'select[name="category[]"]', function(event){ $('select[name="category[]"]').each(function(){ var formData = { 'task': $('select[name="category[]"]').val(), 'name': $('input[name="taskID[]"]').val(), }; $.ajax({ type: 'POST', url: 'php/addressBook.php', data: formData, dataType: 'html', encode: true }) .done(function(msg) { $(".alert").html(msg); }) .fail(function(data) { console.log(data); }) event.preventDefault(); }); });

libreta de direcciones.php

 if (isset($_POST['task'])) { $task = $_POST['task']; $id = $_POST['name']; $stmt = $con->prepare("UPDATE members SET task = ? WHERE id = ?"); $stmt->bind_param('ss', $task, $id); $stmt->execute(); }