ShoeSize.Me

For each shoe, add this tag at the position in the HTML where the Size Advisor button should be displayed:

      <div class="ShoeSizeMe" data-shoeid="SHOE_ID"></div>

Add this script at the end of the html code.

      <script type="text/javascript">
        (function(d, t, s) {

          // Replace the following variables
          var shopId = "SHOP_ID";
          var locale = "en";
          var scale  = "uk";
          // Do not modify
          var a = d.createElement(t);
          var f = d.getElementsByTagName(t)[0];
          a.async = 1;
          a.src = s;
          a.text ='{shopID:"'+shopId+'",locale:"'+locale+'",scale:"'+scale+'"}';
          f.parentNode.insertBefore(a, f);
        })(document, 'script', 'https://shoesize.me/assets/plugin/loader.js');
      </script>

Since you are adding multiple buttons for each product, make sure that only the button of the visible shoe is displayed.

If only the sizes or other details are replaced, but the area where the buttons are remains unchanged, you need to call ShoeSizeMe.checkAvailability("shoeID") after the new details have been loaded and hide the button for the shoe that was active before and display the new one. This could look like this (using jQuery):

      <script type="text/javascript">
        // hide old button
        $(".ShoeSizeMe[data-shoeid=OLD_SHOE_ID]").hide();
        // show new button
        $(".ShoeSizeMe[data-shoeid=NEW_SHOE_ID]").show();
        // check size availability
        ShoeSizeMe.checkAvailability("NEW_SHOE_ID");
      </script>

Your browser is out of date!