Render additional content in single page checkout (Shipping methods)

[maciej_domski]

Hi

I'm adding block with template (phtml) which contains custom javascript to single page checkout. In brief this javascript manages to add button near every shipping method row which meets specific conditions. Everything works fine, except one thing. I'm subscribing on "Magento_Checkout/js/model/shipping-service" isLoading observable:

shippingService.isLoading.subscribe(function () {
   if (!shippingService.isLoading()) {
      renderShippingMethods();
   }
});

When shipping container stops loading my rendering method is invoked. Then I check if specific shipping method input is present (to be able to append additional content to it's parent): 

$('input[id^="' + shipping_method_id + '"]').length

And there is a problem. Often jQuery returns zero length even if the element really exist. I found it works fine on Chrome but not as good on FireFox or IE. When I add timeout before executing my rendering function it helps but sometimes problem still occurs (500ms timeout). I know it's not a solution but maybe you faced similar situation and can help me. I thought that subscribing on isLoading gives me certainty that shipping method inputs will be available at DOM. Any ideas?