I've got multiple select boxes that have the same name. Right now when I select the value from the first select box its submitting that one and updating the database. When I select and item on an other select box its submitting the value from the first one. I feel like the javascript isn't right. Any idea what is wrong?

Heres my 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();
      });
  });

addressBook.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();

}