如何在标签内加载JavaScript？

Question

我正在建立一个网站，并希望在不同的标签中显示不同的产品。每种产品都是Shopify提供的购买按钮脚本，但是只有已加载的产品才是“已选中”标签上的产品。

以下是实时页面：https://www.didsburyprint.com/mulit-product.html

<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">A3</label>

<input id="tab2" type="radio" name="tabs">
<label for="tab2">A2</label>

<input id="tab3" type="radio" name="tabs">
<label for="tab3">A1</label>


<section id="content1">

</section>

<section id="content2">

  </section>

  <section id="content3">

  </section>

该页面只会加载一种产品，打开标签页后该如何加载每个脚本？

这是我要在每个标签中加载的javascript的示例。

<div id='product-component-0d047c59e1d'></div>
       <script type="text/javascript">
       /*<![CDATA[*/

       (function () {
         var scriptURL = 'https://sdks.shopifycdn.com/buy-                     
    button/latest/buy-button-storefront.min.js';
  if (window.ShopifyBuy) {
    if (window.ShopifyBuy.UI) {
      ShopifyBuyInit();
    } else {
      loadScript();
    }
  } else {
    loadScript();
  }

  function loadScript() {
    var script = document.createElement('script');
    script.async = true;
    script.src = scriptURL;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
    script.onload = ShopifyBuyInit;
  }

  function ShopifyBuyInit() {
    var client = ShopifyBuy.buildClient({
      domain: 'didsbury-print.myshopify.com',
      storefrontAccessToken: '84d842627b8d1303f702af4934b58e9b',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [2993409196113],
        node: document.getElementById('product-component-0d047c59e1d'),
        moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
        options: {
   "product": {
    "layout": "horizontal",
     "variantId": "all",
     "width": "100%",
       "contents": {
         "img": false,
         "imgWithCarousel": true,
         "variantTitle": false,
         "description": true,
         "buttonWithQuantity": false,
  "quantity": false
},
"styles": {
  "product": {
    "text-align": "left",
    "@media (min-width: 601px)": {
      "max-width": "100%",
      "margin-left": "0",
      "margin-bottom": "50px"
    }
  },
  "button": {
    "background-color": "#ff4328",
    ":hover": {
      "background-color": "#e63c24"
    },
    ":focus": {
      "background-color": "#e63c24"
    }
  },
  "title": {
    "font-size": "26px"
  },
  "price": {
    "font-size": "18px"
  },
  "compareAt": {
    "font-size": "15px"
  }
}
     },
     "cart": {
       "contents": {
  "button": true
},
"styles": {
  "button": {
    "background-color": "#ff4328",
    ":hover": {
      "background-color": "#e63c24"
    },
    ":focus": {
      "background-color": "#e63c24"
    }
  },
  "footer": {
    "background-color": "#ffffff"
  }
       }
     },
     "modalProduct": {
       "contents": {
         "img": false,
         "imgWithCarousel": true,
         "variantTitle": false,
         "buttonWithQuantity": true,
         "button": false,
         "quantity": false
},
      "styles": {
  "product": {
    "@media (min-width: 601px)": {
      "max-width": "100%",
      "margin-left": "0px",
      "margin-bottom": "0px"
    }
  },
  "button": {
    "background-color": "#ff4328",
    ":hover": {
      "background-color": "#e63c24"
    },
    ":focus": {
      "background-color": "#e63c24"
    }
  }
}
     },
     "toggle": {
       "styles": {
  "toggle": {
    "background-color": "#ff4328",
    ":hover": {
      "background-color": "#e63c24"
    },
    ":focus": {
      "background-color": "#e63c24"
    }
         }
      }
     },
     "productSet": {
       "styles": {
         "products": {
           "@media (min-width: 601px)": {
      "margin-left": "-20px"
           }
         }
       }
     }
   }
      });
           });
         }
       })();
       /*]]>*/
       </script>