insertAfter for more than one div

Question

I have the following section of script

.on('finish.countdown', function(event) {
        $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled');
    }) .insertAfter('#cartDefaultHeading');

I want the same output to appear after more than one div across a couple of different pages. If I change the div name it appears in a new location as expected. But if I try to get it to appear on more than one I don't get any output.

I tried the following

.on('finish.countdown', function(event) {
        $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled');
    }) .insertAfter('#cartDefaultHeading').insertAfter('#checkoutOrderHeading');

and

.on('finish.countdown', function(event) {
    $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled');
}) .insertAfter('#cartDefaultHeading'), .insertAfter('#checkoutOrderHeading') ;

and even

.on('finish.countdown', function(event) {
    $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled');
}) .insertAfter('#cartDefaultHeading');
    $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled');
}) .insertAfter('#checkoutOrderHeading');

None worked. Whenever I try to get it on more than one div I get it on neither. What's the correct syntax to achieve this?

The complete script is shown below:

<script>
jQuery(function($){
if (($('#cartDefaultHeading').length || $('#checkoutOrderHeading').length) && !$('.checkout_dispatch_timer').length) {
    var $this = $('<div class="checkout_dispatch_timer <?php echo $dispatch_countdown_timer_style; ?>"></div>');
    <?php if ($dispatch_countdown_timer_disable === false) { ?>
    var finalDate = moment.tz('<?php echo $dispatch_countdown_timer_date_array[4]; ?>', '<?php echo date_default_timezone_get(); ?>');
    $this.countdown(finalDate.toDate())
    .on('update.countdown', function(event) {
        var format = '%Mm';

        if (event.offset.totalDays > 0) {
            format = '%Dd:%Hh:' + format;
        } else if (event.offset.totalHours > 0) {
            format = '%Hh:' + format;
        } else {
            format = format + ':%Ss';
        }

        dispatch_countdown_timer_text = "<?php echo $dispatch_countdown_timer_text; ?>";
        dispatch_countdown_timer_text = dispatch_countdown_timer_text.replace('%s', event.strftime(format));

        $(this).text(dispatch_countdown_timer_text);

    })
    .on('finish.countdown', function(event) {
        $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled');
    }) 
    .insertAfter('#cartDefaultHeading');
<?php } else { ?>
    $this.text("<?php echo $dispatch_countdown_timer_text; ?>").insertAfter('#checkoutOrderHeading');
<?php } ?>
}
});
</script>

Answer 1

You can't use .insertAfter() multiple times, because each one will remove the element from the previous location before trying to insert it after the next one. Use .after .

 $('#cartDefaultHeading, #checkoutOrderHeading').after( $this.countdown(finalDate.toDate()) .on('update.countdown', function(event) { var format = '%Mm'; if (event.offset.totalDays > 0) { format = '%Dd:%Hh:' + format; } else if (event.offset.totalHours > 0) { format = '%Hh:' + format; } else { format = format + ':%Ss'; } dispatch_countdown_timer_text = "<?php echo $dispatch_countdown_timer_text; ?>"; dispatch_countdown_timer_text = dispatch_countdown_timer_text.replace('%s', event.strftime(format)); $(this).text(dispatch_countdown_timer_text); }) .on('finish.countdown', function(event) { $(this).text("<?php echo TEXT_SHIPPING_BARELY_PAST_DISPATCH; ?>").parent().addClass('disabled'); }) ); 

This assumes that any page only has one of #cartDefaultHeading and #checkoutOrderHeading , because you can't insert the same element in multiple places ( .after and .insertAfter don't make a copy, it moves the element itself).

Answer 2

According the to the docs, you can pass an array of elements to the function. Source: http://api.jquery.com/insertafter/

`insertAfter(['#cartDefaultHeading','#checkoutOrderHeading']);