Cloned elements wiping over each other using html()

Question

I have the following code where I'm looping over elements, pulling out the necessary data and outputting it to a div.

The only data it's currently outputting is the last looped over element so that suggests that using .html() is just clearing the div each time.

How can I output each looped over element without wiping over it each time?

  $('.sc-coupons-list').find('.text-xs.uppercase:contains("Store Credit")').each(function(){
      if ($(this).length > 0) {
        var amount = $(this).closest('.sc-coupon').find('.text-4xl.font-semibold').text();
        var expires = $(this).closest('.sc-coupon').find('.validity').text();
        var code = $(this).closest('.sc-coupon').find('.font-mono.uppercase').text();
        $('.store-credit-coupons').html("<div class='store-credit'><div class='coupon-logo'></div><div class='coupon-amount'>£" + amount + "</div><div class='coupon-strip'></div><div class='coupon-expires'>Expires: " + expires + "</div><div class='coupon-code'>Voucher code: " + code + "</div><a href='#' class='coupon-add'>Add to account</a><a href='#' class='coupon-donate'>Donate</a></div>");
      }
    });

score 1 · Accepted Answer · answered Feb 04 '21 at 15:27

Try using:

  $('.sc-coupons-list').find('.text-xs.uppercase:contains("Store Credit")').each(function(){
      if ($(this).length > 0) {
        var amount = $(this).closest('.sc-coupon').find('.text-4xl.font-semibold').text();
        var expires = $(this).closest('.sc-coupon').find('.validity').text();
        var code = $(this).closest('.sc-coupon').find('.font-mono.uppercase').text();
        $('.store-credit-coupons').append("<div class='store-credit'><div class='coupon-logo'></div><div class='coupon-amount'>£" + amount + "</div><div class='coupon-strip'></div><div class='coupon-expires'>Expires: " + expires + "</div><div class='coupon-code'>Voucher code: " + code + "</div><a href='#' class='coupon-add'>Add to account</a><a href='#' class='coupon-donate'>Donate</a></div>");
      }
    });

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

Instead of using .html() use .append()

Cloned elements wiping over each other using html()

1 Answers1