Come ottenere l'ID del post da un pulsante e passare il titolo a una 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" href="javascript:void(0);" class="info">più informazioni</a>
    </div>


    <div id="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" alt="Icona chiusura" title="Chiudi finestra modale"></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/">Diventa Membro!</a>
          </div>
        </div>

    <?php }?>
    </div>
    </div>

Sto visualizzando 4 card con nomi e titoli lavorativi e un pulsante per aprire una modale. Quando l'utente clicca sul pulsante, si apre una modale con un'immagine, un titolo, una descrizione, ecc...

Purtroppo, riesco solo ad aprire una Modal con i dettagli di un singolo post. Vorrei far corrispondere il contenuto della modale con il contenuto delle card, se ha senso.

Quindi card = Harry Modal = Harry

<script> 
function moreinfoModal(field) {
    console.log(field.id);
    // Recupera i dati del post tramite AJAX
    $.ajax({
        url: '/wp-admin/admin-ajax.php',
        type: 'POST',
        data: {
            action: 'get_post_info',
            post_id: field.id
        },
        success: function(response) {
            // Aggiorna il contenuto della modale con i dati ricevuti
            var data = JSON.parse(response);
            $('#moreinfo-modal .teammember_div img').attr('src', data.image);
            $('#moreinfo-modal .teammember_div p:first').text(data.title);
            $('#moreinfo-modal .teammember_div p:last').text(data.about);
            $('#moreinfo-modal .jobtitle').text(data.jobtitle);
            $('#moreinfo-modal').toggleClass('open');
        }
    });
}

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

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

Ti servirà anche aggiungere questa funzione al file functions.php:

add_action('wp_ajax_get_post_info', 'get_post_info');
add_action('wp_ajax_nopriv_get_post_info', 'get_post_info');

function get_post_info() {
    $post_id = $_POST['post_id'];
    
    // Recupera i dati del post
    $post_data = array(
        'image' => wp_get_attachment_url(get_post_thumbnail_id($post_id)),
        'title' => get_the_title($post_id),
        'about' => get_field('about', $post_id), // Sostituisci con il tuo campo personalizzato
        'jobtitle' => get_field('jobtitle', $post_id) // Sostituisci con il tuo campo personalizzato
    );
    
    echo json_encode($post_data);
    wp_die();
}