Inability to click and select data created with Ajax

[emsanator]

I create the product's information and variations with Ajax, but it is not possible to click on the variations, what could be the reason?

<form>
    <div class="form-group">
        <p class="mb-5">
            Size: <strong><span id="sizeCaption">--</span> US</strong>
        </p>
        <div id="item_variation_size" class="mb-2"></div>
        <div class="form-row mb-7">
            <div class="col-12 col-lg">
                <button type="button" class="btn btn-block btn-dark mb-2 addToCart">Add to Cart <i class="fe fe-shopping-cart ml-2"></i></button>
            </div>
        </div>
    </div>
</form>

Ajax:

(async () => {
    const itemData = await submitSender(null, "getItemData", itemID, "post");
    if (itemData) {
        if (itemData.item.v) {
            for (var i = 0; i < itemData.item.v.variationData.sizes.length; i++) {
                document.getElementById("item_variation_size").innerHTML +=
                    '<div class="custom-control custom-control-inline custom-control-size mb-2"><input type="radio" class="custom-control-input" name="sizeRadio" id="sizeRadio_' +
                    itemData.item.v.variationData.sizes +
                    '" value="' +
                    itemData.item.v.variationData.sizes[i] +
                    '" data-toggle="form-caption" data-target="#sizeCaption"><label class="custom-control-label" for="sizeRadio_' +
                    itemData.item.v.variationData.sizes[i] +
                    '">' +
                    itemData.item.v.variationData.sizes[i] +
                    "</label>";
            }
        }
    }
})();

Could data-toggle="form-caption" data-target="#sizeCaption" be the reason why the variation uploaded and created with Ajax doesn't work?

[Dani]

If the items appear in the DOM but are simply not clickable, this is most likely a CSS issue. It’s hard to diagnose without seeing the full working page. It’s possible it’s a z-index issue. For example, there might be a transparent div on top of the clickable elements.

[Mr.M]

I also think the issue is within the CSS, see if you don't also have mixed bootstrap and also try to test it in a simple standard radio radio button or check box and see if it will work on a non-bootstrap element. If it work the you might need to verify your bootstrap you are using, I also had the same issue I ended up not using the slide option because of this.

[Biiim]

Missing a </div> at the end

Document.getElementById("item_variation_size").innerHTML +=
                    '<div class="custom-control custom-control-inline custom-control-size mb-2"><input type="radio" class="custom-control-input" name="sizeRadio" id="sizeRadio_' +
                    itemData.item.v.variationData.sizes +
                    '" value="' +
                    itemData.item.v.variationData.sizes[i] +
                    '" data-toggle="form-caption" data-target="#sizeCaption"><label class="custom-control-label" for="sizeRadio_' +
                    itemData.item.v.variationData.sizes[i] +
                    '">' +
                    itemData.item.v.variationData.sizes[i] +
                    "</label>";