jQuery using .siblings() to find value of input not returning anything [duplicate]

Question

I have cards which represent various locations in my app. Each location has one card each. I'm trying to get the id the location which I've placed in a hidden input element within each card. I've tried using both .closest() and .siblings() but neither seem to return anything when I try and log to the console. Any ideas at all?

function getLocationData() {

  $.ajax({
    type: "GET",
    url: 'php/getAllLocations.php',
    dataType: "json",
    success: function(data){
      $('#location-results').empty();
      $('#adddeptlocationlist').empty();
      $('#editdeptlocationlist').empty();
      $('#edit-location-list').empty();
    let locations = data.data;
  
    
    locations.forEach(function(position){
      $('#location-results').append(`<div class="card" style="width: 18rem;">
      <div class="card-body" id="${position.id}">
        <div class="individual-result"><i class="fa-solid fa-map-location fa-xl"></i><h5 class="card-title record" id="one-location-name-${position.id}">${position.name}</h5></div>
        <button class="edit-location-button" data-bs-toggle="modal" data-bs-target="#editLocationModal"><i class="fa-solid fa-pen-to-square"></i></button>
        <input class="location-id" value="${position.id}">
        <button type="button" class="delete-location-button"><i class="fa-solid fa-trash"></i></button>
      </div>
      
    </div>`);
    
    $('#adddeptlocationlist').append(`<option value="${position.id}">${position.name}</option>`);
    $('#editdeptlocationlist').append(`<option value="${position.id}">${position.name}</option>`);
    $('#edit-location-list').append(`<option value="${position.id}">${position.name}</option>`);
  
  });
}
  })
  
}

function getDeptData() {

  $.ajax({
    type: "GET",
    url: "php/getAllDepartments.php",
    dataType: "json",
    success: function(data){
      $("#department-results").empty();
      $("#add-employee-dept-list").empty();
      $("#editdeptlist").empty();
      $("#edit-employee-dept-list").empty();
      let departments = data.data;

      departments.forEach(function(position){


        $("#add-employee-dept-list").append(`<option value="${position.id}">${position.name}</option>`);
                    
        $("#department-results").append(
          `<div class="card" style="width: 18rem;">
      <div class="card-body">
        <p id="location-id-${position.id}" class="department-location-id">${position.locationID}</p>
        <div class="individual-result"><i class="fa-solid fa-building fa-xl"></i><h5 class="card-title record" id="department-name-${position.id}">${position.name}</h5></div>
        <div class="individual-result"><i class="fa-solid fa-map-location"></i><h6 id="location-name-${position.id}" class="card-subtitle mb-2 text-muted record">${position.location}</h6></div>
        <button id="${position.id}" class="edit-location-button" data-bs-toggle="modal" data-bs-target="#editDepartmentModal" onclick="populateEditDepartmentModal(this.id);"><i class="fa-solid fa-pen-to-square"></i></button>
        <button type="button" class="delete-department-button"><i class="fa-solid fa-trash"></i></button>
      </div>
      
    </div>`);
  
        
      });
    }
  })
}



function getEmployeeData() {
  $.ajax({
    type: "GET",
    url: "php/getAll.php",
    dataType: "json",
    success: function(data){
      let employees = data.data;
      $("#employee-results").empty();
      currentData = employees;
      console.log(employees);
      employees.forEach(function(position){

        let jobTitle;

        if (position.jobTitle == ""){
          jobTitle = "Position not allocated";
        } else {
          jobtitle = position.jobTitle;
        }

        $("#employee-results").append(`<div class="card" style="width: 18rem;">
          <div class="card-body">
            <div class="individual-result"><h5 class="card-title record"><span id="first-name-${position.id}">${position.firstName}</span>&nbsp<span id="last-name-${position.id}">${position.lastName}</span></h5></div>
            <div class="individual-result"><p id="email-${position.id}">${position.email}<p></div>
            <div class="individual-result"><p id="jobTitle-${position.id}">${jobTitle}<p></div>
            <p id="one-department-id-${position.id}" class="department-id">${position.departmentID}</p>
            <div class="dept-location"><div class="individual-result"><i class="fa-solid fa-building"></i><h6 class="record" id="one-department-${position.id}">${position.department}</h5></div>
            <div class="individual-result"><i class="fa-solid fa-map-location"></i><h6 class="record" id="location-${position.id}">${position.location}</h5></div>
            
          </div>
          <button id="${position.id}" class="edit-employee-button" data-bs-toggle="modal" data-bs-target="#editEmployeeModal" onclick="populateEditModalWithCurrentInfo(this.id);"><i class="fa-solid fa-pen-to-square"></i></button>
          <button type="button" class="delete-employee-button"><i class="fa-solid fa-trash"></i></button>
          </div>
        </div>`);
    
      })
    }
  })
}

  getLocationData();
  getDeptData();
  getEmployeeData();

  
$('#addEmployeeForm').on("submit", function(event) {
  event.preventDefault();
  
  let firstName = $('#newFirstName').val();
  let lastName = $('#newLastName').val();
  let email = $('#newEmail').val();
  let departmentID = $('#add-employee-dept-list').val();
  let jobTitle = $('#newJobTitle').val();
  
  $.ajax({
    type: "POST",
    url: 'php/addNewEmployee.php',
    dataType: "json",
    data: {
      fname: firstName,
      lname: lastName,
      email: email,
      department: departmentID,
      jobTitle: jobTitle
    },
    success: function(data) {
      
      $('#addEmployeeModal').modal('hide');
      $(".modal-backdrop").remove();
      $('#addEmployeeForm').trigger('reset');
      $('#toastSuccessMessage').html(`${firstName} ${lastName} successfully added.`);
      $('#toastSuccess').toast('show');
      $("#employee-results").empty();
      getEmployeeData();
      
            
      

    },
    error: function(jqXHR, textStatus, errorThrown) {
      $('#addEmployeeModal').modal('hide');
      $('#toastErrorMessage').html(`${firstName} ${lastName} not added.<br>${errorThrown}<br>${jqXHR}<br>${textStatus}.`);
      $('#toastError').toast('show');
    }
      
    
      
    
  });
  
});
  

$('#delete-employee-step-one-button').on('click', function(){

  let employeeToDelete = `${$('#editemployeefirstname').val()} ${$('#editemployeelastname').val()}` 

  $('#editemployeefirstname').attr("disabled", true);
  $('#editemployeelastname').attr("disabled", true);
  $('#editemployeeemail').attr("disabled", true);
  $('#edit-employee-dept-list').attr("disabled", true);
  $('#edit-employee-modal-footer').hide();
  $('#employeeToDelete').html(`Are you sure you wish to delete ${employeeToDelete}`);
  $('#delete-employee-confirmation-modal-footer').show();

});

$('#delete-employee-go-back-button').on('click', function(){
  $('#editemployeefirstname').attr("disabled", false);
  $('#editemployeelastname').attr("disabled", false);
  $('#editemployeeemail').attr("disabled", false);
  $('#edit-employee-dept-list').attr("disabled", false);
  $('#delete-employee-confirmation-modal-footer').hide();
  $('#edit-employee-modal-footer').show();
});

$('#delete-employee-proceed-button').on('click', function(){

    let employeeToDelete = `${$('#editemployeefirstname').val()} ${$('#editemployeelastname').val()}` 

    employeeID = $('#editemployeeid').val();

    $.ajax({
      type: "POST",
      url: 'php/deleteEmployeeByID.php',
      dataType: "json",
      data: {
        employeeID: employeeID
      },
      success: function(data) {
        
          $('#editEmployeeModal').modal('hide');
          $('#editEmployeeForm').trigger('reset');
          $('#toastSuccessMessage').html(`${employeeToDelete} successfully deleted.`);
          $('#toastSuccess').toast('show');
          $('.modal').css('overflow-y', 'auto');
          $(".modal-backdrop").remove();
          $('#editemployeefirstname').attr("disabled", false);
          $('#editemployeelastname').attr("disabled", false);
          $('#editemployeeemail').attr("disabled", false);
          $('#edit-employee-dept-list').attr("disabled", false);
          $('#delete-employee-confirmation-modal-footer').hide();
          $('#edit-employee-modal-footer').show();
          $("#employee-results").empty();
          $('#search-bar').val("");
          $('#search-results').hide();
          $('#search-results').html("");
          $('#employee-results').show();
          getEmployeeData();
          
          
  
      },
      error: function(jqXHR, textStatus, errorThrown) {
        $('#editEmployeeModal').modal('hide');
        $('#toastErrorMessage').html(`${employeeToDelete} not deleted.<br>${errorThrown}<br>${jqXHR}<br>${textStatus}.`);
        $('#toastError').toast('show');
      }
      
    });

    
  
});

$('#edit-employee-proceed-button').on('click', function(){
  let employeeID = $('#editemployeeid').val();
  let firstName = $('#editemployeefirstname').val();
  let lastName = $('#editemployeelastname').val();
  let email = $('#editemployeeemail').val();
  let department = $('#edit-employee-dept-list').val();
  let jobTitle = $('#editJobTitle').val();

  $.ajax({
    type: "POST",
    url: 'php/updateEmployeeByID.php',
    dataType: "json",
    data: {
      employeeID: employeeID,
      firstName: firstName,
      lastName: lastName,
      jobTitle: jobTitle,
      email: email,
      department: department
    },
    success: function(data) {
      
      $('#editEmployeeModal').modal('hide');
        
        $('#editEmployeeForm').trigger('reset');
        $('#toastSuccessMessage').html(`${firstName} ${lastName} successfully updated.`);
        $('#toastSuccess').toast('show');
        $('.modal').css('overflow-y', 'auto');
        $(".modal-backdrop").remove();
        $('#editemployeefirstname').attr("disabled", false);
        $('#editemployeelastname').attr("disabled", false);
        $('#editemployeeemail').attr("disabled", false);
        $('#edit-employee-dept-list').attr("disabled", false);
        $('#delete-employee-confirmation-modal-footer').hide();
        $('#edit-employee-modal-footer').show();
        $('#search-bar').val("");
        $('#search-results').hide();
        $('#search-results').html("");
        $('#employee-results').show();
        $("#employee-results").empty();
        getEmployeeData();

    },
    error: function(jqXHR, textStatus, errorThrown) {
      $('#editEmployeeModal').modal('hide');
      $('#toastErrorMessage').html(`${firstName} ${lastName} not updated.<br>${errorThrown}<br>${jqXHR}<br>${textStatus}.`);
      $('#toastError').toast('show');
    }
      
    
      
    
  });
});

function populateEditModalWithCurrentInfo(employeeID) {

  /**let employeeFirstName = $(`#first-name-${employeeID}`).html();
  let employeeLastName = $(`#last-name-${employeeID}`).html();
  let departmentID = $(`#one-department-id-${employeeID}`).html();
  let department = $(`#one-department-${employeeID}`).html();
  let jobTitle = $(`#jobTitle-${employeeID}`).html();
  let email = $(`#email-${employeeID}`).html();*/

  $.ajax({
    type: "POST",
    url: 'php/getPersonnelByID.php',
    dataType: "json",
    data: {
      employeeID: employeeID
    },
    success: function(data){
      console.log(data.data.department);
      console.log(data.data.personnel[0]);

      let personnel = data.data.personnel[0];
      let department = data.data.department;
      
      let email = personnel.email;
      let jobTitle = personnel.jobTitle;
      if (email == ""){
        email = "No email address";
      }

      if (jobTitle == ""){
        jobTitle = "Position not allocated";
      }
      $('#editemployeefirstname').val(personnel.firstName);
      $('#editemployeelastname').val(personnel.lastName);
      $('#editemployeeemail').val(email);
      $('#editJobTitle').val(jobTitle);

      department.forEach(function(position){
        $('#edit-employee-dept-list').append(`<option value="${position.id}">${position.name}</option>`)
      });


    }
  });

  
  

}

function populateEditLocationModal(locationID) {
  
  let locationName = $(`#one-location-name-${locationID}`).html();

  $('#updatedLocation').val(locationName);
  $('#edit-location-id').val(locationID);
}

function populateEditDepartmentModal(departmentID) {
  
  let locationID = $(`#location-id-${departmentID}`).html();
  let locationName = $(`#location-name-${departmentID}`).html();
  let departmentName = $(`#department-name-${departmentID}`).html();

  $('#updated-department-name').val(departmentName);
  $('#editdeptlocationlist').empty();
  getLocationData();
  $('#editdeptlocationlist').prepend(`<option value="${locationID}" selected>${locationName}</option>`);
  $('#department-id').val(departmentID);
}


  $('#adddeptform').on("submit", function(event) {
    event.preventDefault();
    
    let deptName = $('#addDeptName').val();
    let location = $('#adddeptlocationlist').val();

  $.ajax({
    type: "POST",
    url: 'php/insertDepartment.php',
    dataType: "json",
    data: {
      deptName: deptName,
      location: location
    },
    success: function(data) {
      
      $('#addDepartmentModal').modal('hide');
      
      $('#adddeptform').trigger('reset');
      $('#toastSuccessMessage').html(`${deptName} successfully added.`);
      $('#toastSuccess').toast('show');
      $(".modal-backdrop").remove();
      $('#addDeptName').attr("disabled", false);
      $('#adddeptlocationlist').attr("disabled", false);
      $('#add-department-confirmation-modal-footer').hide();
      $('#add-department-modal-footer').show();
      $('#department-results').empty();
      getDeptData();
      getEmployeeData();

    },
    error: function(jqXHR, textStatus, errorThrown) {
      $('#addDepartmentModal').modal('hide');
      $('#toastErrorMessage').html(`${deptName} not added.<br>${errorThrown}<br>${jqXHR}<br>${textStatus}.`);
      $('#toastError').toast('show');
    }
      
    
      
    
  });
  })



$('#editDepartmentForm').on("submit", function(event) {
    event.preventDefault();
  let departmentID = $('#department-id').val();
  let updatedDepartmentName = $('#updated-department-name').val();
  let updatedLocation = $('#editdeptlocationlist').val();

  $.ajax({
    type: "POST",
    url: 'php/updateDepartmentByID.php',
    dataType: "json",
    data: {
      departmentID: departmentID,
      updatedDepartmentName: updatedDepartmentName,
      updatedLocation: updatedLocation
    },
    success: function(data) {
      
      $('#editDepartmentModal').modal('hide');
      
      $('#editDepartmentForm').trigger('reset');
      $('#toastSuccessMessage').html(`${updatedDepartmentName} successfully updated.`);
      $('#toastSuccess').toast('show');
      $(".modal-backdrop").remove();
      $('#edit-department-confirmation-modal-footer').hide();
      $('#edit-department-delete-button').show();
      $('#updated-department-name').attr("disabled", false);
      $('#editdeptlocationlist').attr("disabled", false);
      $('#edit-department-modal-footer').show();
      $('#department-results').empty();
      getDeptData();
      getEmployeeData();
      

    },
    error: function(jqXHR, textStatus, errorThrown) {
      $('#editDepartmentModal').modal('hide');
      $('#toastErrorMessage').html(`${updatedDepartmentName} not updated.<br>${errorThrown}<br>${jqXHR}<br>${textStatus}.`);
      $('#toastError').toast('show');
    }
      
    
      
    
  });
})


$('#edit-department-delete-button').on('click', function(){
  
  let departmentID = $('#department-id').val();
  let departmentName = $('#updated-department-name').val();
  
  const areThereEmployeesAssignedToDept = currentData.some((element) => element.departmentID === departmentID); 

  if(areThereEmployeesAssignedToDept) {
    $('#updated-department-name').attr("disabled", true);
    $('#editdeptlocationlist').attr("disabled", true);
    $('#edit-department-delete-button').hide();
    $('#edit-department-modal-footer').hide();
    $('#departmentToEditError').html(`This department still has employees assigned to it. You must either delete these employees or assign them to another department.`);
    $('#delete-department-error-modal-footer').show();
  } else {
    $('#updated-department-name').attr("disabled", true);
    $('#editdeptlocationlist').attr("disabled", true);
    $('#edit-department-delete-button').hide();
    $('#edit-department-modal-footer').hide();
    $('#departmentToDelete').html(`Are you sure you wish to delete ${departmentName}`);
    $('#delete-department-confirmation-modal-footer').show();
  }

  /**New DELETE FUNCTION */

  /**$(document).on('click', '.delete-location-button', function() {
    let locationID = $(this).prev().val();
    console.log(locationID);   
});*/

$('.delete-location-button').on('click', function(){
  let button = $(this);
  let locationID = button.parent().attr('id');
   console.log(locationID);   
});

Answer 1

Since the input element immediately precedes the button, you can use prev() to retrieve the location id, like this:

button.prev('.location-id').val() (or button.prev().val(), since it is the direct previous sibling).

BUT, it looks like you are creating card elements DYNAMICALLY with append().

This means you cannot bind events directly to these elements, and you have to delegate the event to a static ancestor (like document).

This should work:

$(document).on('click', '.delete-location-button', function() {
    let locationID = $(this).prev().val();
    console.log(locationID);   
});