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?

[dennisjn]

Your input id is given as "id=“sizeRadio_${itemData.item.v.variationData.sizes”
Should this be ‘id="sizeRadio_${itemData.item.v.variationData.sizes[I]’?
And instead of ’ for (var i = 0; i < itemData.item.v.variationData.sizes.length; ’
First lose the semi-colon and as it seems to be an array, use instead:
for(const item of itemData.item.v.variationData.sizes) {
}
Then use item instead of itemData.item.v.variationData.sizes[I]

Also instead of appending text snippets and variables use back-ticks to create strings.
Instead of

<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">

use

<input type="radio" class="custom-control-input" name="sizeRadio"
	id="sizeRadio_${item}"
	value="${item}"
	data-toggle="form-caption"
	data-target="#sizeCaption">

The div elements you are creating do not have a closing tag
I assume the items and variations are being displayed.
To be able to click on them you need to attach a click event handler to them.
The event handler can be attached to the div elements inside the loop
or to the element with the id of “item_variation_size”.

[Emsanator]

Thank you for your answer.

id="sizeRadio_${itemData.item.v.variationData.sizes[I]

I forgot to add this at the end, now I added it and it is now clickable. However, id="sizeCaption" does not change after you choose it.
Unclosed div tags actually exist, but I didn’t include them in the question.