JS - Display:none/block Olduğunda Fonksiyon Çalışmıyor

Merhaba Shopify'ın buy butonu ile bir mikro site yapmaktayım. Bu site adım adım ilerlemekte her adım ilerlediğinde başka bir satın alma butonu çıkıyor. Burada takıldığım nokta ise; Her adım display none olarak geliyor butona basınca display block oluyor. İlk ekrana butonu eklediğimde sorunsuz olarak çalışıyor 2. adım dediğimde buton gelmiyor. Ekranın boyutu değişince geliyor.

Başka bir çözüm olarak adım butonlarına bağladım oraya tıklandıkça butonları tetikliyorum ama bu kez de bir önceki adıma tıkladığımda buton 2 kere görünüyor her ne kadar ile geri yaparsam o sayı kadar buton oluşuyor.

Kısacası isteğim site yüklendikten sonra tüm butonlar'ın aktif olarak görünmesi.

$("#insideyes").click(function(){ ShopifyBuyInit();});

Kodlarım aşağıdaki gibi;

<div class="wps-buy-button" id='5551922249879' data-id='5551922249879'></div>

function ShopifyBuyInit() {

var client = ShopifyBuy.buildClient({
domain: '',
apiKey: '',
appId: 'x',
});

ShopifyBuy.UI.onReady(client).then(function (ui) {

jQuery(".wps-buy-button").each(function () {

elementId = '';
productId = jQuery(this).attr("data-id");
varId = jQuery(this).attr("data-var");

if (varId) {
elementId = productId + "-" + varId;
} else {
elementId = productId;
}

ui.createComponent('product', {
id: [parseInt(productId)],
variantId: parseInt(varId),
node: document.getElementById(elementId),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"variantId": varId,
"contents": {
"img": false,
"imgWithCarousel": false,
"title": false,
"variantTitle": false,
"options": (varId == 'all'),
"price": false,
"description": false,
"buttonWithQuantity": false,
"quantity": false,
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
}
}
},
"button": {
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "0px"
},
"cart": {
"contents": {
"button": true
},
"styles": {
"footer": {
"background-color": "#ffffff"
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": false,
"variantTitle": false,
"buttonWithQuantity": false,
"button": false,
"quantity": false
},
"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
}
}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
}
}
});
});
});
}

jQuery(document).ready(function () {
ShopifyBuyInit();
});

isButtonActive = false; adında bir bool olusturun,
buton ilk olustugunda bu değer true olsun.
eğer isButtonActive, true olmussa bir daha button olusturmamasını if else ile yapabilirsiniz.