jQuery click event removing first element

Question

Im working on a project and on my .ejs file I have a popup:

<div id="just-claimed-popup2" class="popup">
   <h6>You just claimed:</h6>
   <h2 id="card-just-claimed"></h2>
   <p class="show-message">Show this Screen!</p>
   <button id="deletePromoFromHome" class="close-button">Close</button>
</div>

On my javascript file I have a code that creates cards on a loop:

$('#promotion-container footer').before(`
   <div class="promo card promo${i}">
     <div class="promo-wrapper">
         <div class="promo-header">
            <h2 class="promo-title">${eventName}</h2>
            <span class="close-promo-wrapper"><span class="close-promo"></span></span>
         </div>
   <div class="promo-info">
   <span class="promo-details">
   <p class="promo-detail promo-location">${eventLocation}</p>
   <p class="promo-detail promo-date">${eventDate}</p>
   <p class="promo-detail promo-time">${eventTime}
   <span class="promo-description"></span>
   <span class="buttonRedemp${i}">
        <button class="redddButt load-button2" data="Reedem Card">Reedem Card</button>
    </span>
   </div>
  </div>
</div>
      `)

I want the card to disappear when people click 'redddButt', this is my code:

$(`#promotion-container .promo${i} .redddButt`).on('click', function(e){
    e.stopPropagation();
    $(`div.promo${i}`).addClass('toDelete')

    var esc = $.Event("keyup", { keyCode: 27 });
    $(document).trigger(esc);
    $('#just-claimed-popup2').addClass('reveal');
    $('#card-just-claimed').text(eventName);

    $('#deletePromoFromHome').click(function(){
        $('div.toDelete').fadeOut("slow")
    })
})

PROBLEM: it always removes just the first card clicked and if you click the button in another one it stops working, so it only works once. If I console.log something the click event is happening, it's just not running the code inside of it.

Answer 1

Try changing your handler to:

$('body').on('click', `#promotion-container .promo${i} .redddButt`, function(e){
  //function stuff here
}

The problem might be that elements are generated after the handler is attached.

Answer 2

Your code is missing some few closing tags. Since the cards are dynamically generated, try using (not tested):

var buttonContext;

$(document).on('click', '#promotion-container .promo .redddButt', function() {
     buttonContext = $(this);
    // Something 
});

$('#deletePromoFromHome').click(function(){
    buttonContext.closest('.promo').fadeOut("slow");
});

You can omit this line: $(div.promo${i}).addClass('toDelete');

The cards may have a single class (.promo) instead of (.promo#), unless may be you want to do further manipulation (say different styling etc).

Check this for more details on $(document) : https://stackoverflow.com/a/32066793/3906884