How can I use a modal as additional step before my function executes another upon user approval?

I have a delete icon of an element which shows a modal to ask for the users approval. Once the user approves it should fire another function to delete another element.

First I call the modal

// Function to delete a benefit
$('.delete-benefit').on('click', function(e) {
    let id = $(this).closest('.benefit-wrapper-id').attr('id');  // Get the id
    call_modal('Delete Benefit', 'Are you sure you want to delete the Benefit?', delete_benefit(id))

    // Only execute this function if modal's button with id 'confirm-button' was clicked
    delete_benefit(id) // Delete the benefit
})

// Call the modal
  function call_modal(title, text, func) {
      $('#modalTitle').html(title) // Set some texts
      $('#modalText').html(text) // Set some texts
      $('#modal-wrapper').show() // Open it
  }

// Eventlistener for the modal to execute the passed function upon approval

  // Execute the passed function on confirm
  document.getElementById("confirm-button")
        .addEventListener("click", () => {
          func()
  }, false);

I tried to pass the delete_benefit(id) function to the modal but this somehow didn’t work out as intended (as I want to apply this logic to multiple functions using the same modal component). How to accomplish this / what is a typical workflow here?

Answer

In this approach I’m passing information about what should happen when pressing the confirm button directly to the button element itself, via data-attributes:

// Function to delete a benefit
$('.delete-benefit').on('click', function(e) {
  let id = $(this).closest('.benefit-wrapper-id').attr('id'); // Get the id

  call_modal('Delete Benefit', 'Are you sure you want to delete the Benefit?', 'delete', id)
})

// Call the modal
function call_modal(title, text, intent, id) {
  $('#confirm-button').attr('data-intent', intent) // WHAT SHOULD THE CONFIRMATION DO
  $('#confirm-button').attr('data-id', id) // WHICH ID IS AFFECTED BY THE CONFIRMATION
  $('#modalTitle').html(title) // Set some texts
  $('#modalText').html(text) // Set some texts
  $('#modal-wrapper').show() // Open it
}

// Eventlistener for the modal to execute the passed function upon approval

// Execute the passed function on confirm
document.getElementById("confirm-button").addEventListener("click", function() {

  let intent = $(this).attr('data-intent')

  switch (intent) {

    case 'delete':
      delete_benefit($(this).attr('data-id'))
      break;

  }

  $(this).attr('data-intent', '')
  $(this).attr('data-id', '')
}, false);


function delete_benefit(id) {
  console.log('Delete benefit: ', id)
}

#modal-wrapper {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="benefit-wrapper-id" id="35">
  <button class="delete-benefit">delete</button>
</div>

<div id="modal-wrapper">
  <div id="modalTitle"></div>
  <div id="modalText"></div>
  <button id="confirm-button">Confirm</button>
</div>