Dynamic content in popup

Question

i want to use a single popup that shows up when different list elements are clicked and I want the list elements to give the popup its information. I gave it a shot but i can't seem to fetch the text (from the li element) dynamically to the popup

A list item:

    <ul id="wizard-card-list">
        <li class="wizard-card" data-toggle="modal" data-target="#emailpopup">
            <a href="#" class="cd-popup-trigger">
                <img class="wizard-card-avatar" src="img/avatars/chrisandashley.png">
                <h5 class="wizard-name">Chris & Ashley</h5>
                <span>U.S.A. West Coast</span>
            </a>
        </li>
    </ul>

The PopUp:

 <div id="email-popup" class="modal cd-popup" role="alert">
        <div class="cd-popup-container">
            <div id="popup-wizard-name"
            <p>Chris & Ashley</p>
            <a href="#0" class="cd-popup-close img-replace">Close</a>
        </div> <!-- cd-popup-container -->
      </div> <!-- cd-popup -->

The javascript:

jQuery(document).ready(function($){

//open popup
$('.cd-popup-trigger').on('click', function(event){
    var element = $(event.relatedTarget); // the li that triggered the modal to show
    var dynamic_text = element.find('.wizard-name').text(); // Extract the value of the .text div inside that li

    event.preventDefault();
    $('#email-popup').addClass('is-visible');

    $("#popup-wizard-name").html('the users post says: ' + dynamic_text );

});

Answer 1

Instead of relatedTarget you can use $(this) . Check updated snippet below..

 //open popup $('.cd-popup-trigger').on('click', function(event){ // var element = $(event.relatedTarget); // the li that triggered the modal to show var dynamic_text = $(this).find('.wizard-name').text(); // Extract the value of the .text div inside that li event.preventDefault(); $('#email-popup').addClass('is-visible'); $("#popup-wizard-name").html('the users post says: ' + dynamic_text ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="wizard-card-list"> <li class="wizard-card" data-toggle="modal" data-target="#emailpopup"> <a href="#" class="cd-popup-trigger"> <img class="wizard-card-avatar" src="img/avatars/chrisandashley.png"> <h5 class="wizard-name">Chris & Ashley</h5> <span>USA West Coast</span> </a> </li> </ul> <div id="email-popup" class="modal cd-popup" role="alert"> <div class="cd-popup-container"> <div id="popup-wizard-name"> <p>Chris & Ashley</p> <a href="#0" class="cd-popup-close img-replace">Close</a> </div> <!-- cd-popup-container --> </div> <!-- cd-popup --> 

Answer 2

Use $(this) instead of $(event.relatedTarget) :

var element = $(this); // the li that triggered the modal to show
var dynamic_text = element.find('.wizard-name').text(); // Extract the value of the .text div inside that li