Modal opens all post IDs

Question

This is my modal code. The first code displays and image, job title and name of each post ID.

When the user clicks on the more info link it should open a button with more info about the post, but instead it opens all post modals. Is there any way I can get only the same post ID to open as a modal?

<div><?php echo wp_get_attachment_image($image_upload,$size = 'full');?><br/>
    <span class="name"><?php echo $title; ?></span><span class="jobtitle"><?php echo $jobtitle; ?></span>
    <a onclick="return moreinfoModal(this);" id="<?php echo get_the_ID();?>" data-toggle="modal" data-target="#moreinfo-modal-<?php echo get_the_ID();?>" href="javascript:void(0);" class="info">more info</a>
  </div>


  <div id="moreinfo-modal-<?php echo get_the_ID();?>" class="moreinfo-modal" role="dialog">
        <div class="teammember_div">
          <a id="close-moreinfo" onclick='return closeMoreInfoModal();' href="javascript:void(0);"><img src="https://brentbrookbush.com/wp-content/themes/brent/images/svgs/icon.svg"></a>
          <?php echo wp_get_attachment_image($image_upload,$size = 'full');?>
          <p><?php echo $title ?></p>
          <p><?php echo $about ?></p>
          <span class="jobtitle"><?php echo $jobtitle ?></span>

          <span id="moreinfo" style="display: inherit;"></span>
          <a id="modal-join" class="btn-cta" href="/sign-up/">Become a Member!</a>
        </div>
      </div>

  <?php }?>  

Sorry have added the script below

<script> function moreinfoModal(field) {
    console.log(field.id);
    $('.moreinfo-modal').toggleClass('open');
}


function closeMoreInfoModal() {
    $('.moreinfo-modal').toggleClass('open');
}

$(document).on('click', '.close-pill', function(e) {
    $(this).parent().remove();
    e.preventDefault();
});
</script>

Answer 1

So your script is doing exactly what you have told it to do.

Here you are passing the element to the function, but you never use it, instead you just query all elements with a class and add another class.

function moreinfoModal(field) {
    console.log(field.id);
    $('.moreinfo-modal').toggleClass('open');
}

What you should do is only add the class to the element the buttin is targeting:

function moreinfoModal(field) {
    // Get the button target.
    var target = field.getAttribute('data-target')
    // Add class to target.
    $(target).addClass('open');
}

And when you need to close the model window. You can just look for only models that are open. As you aren't passing an element in to get the id from.

function closeMoreInfoModal() {
    // Close all windows because you we dont have the open elements id.
    $('.moreinfo-modal.open').removeClass('open');
}