After closely examining my radio buttons, I noticed a strange issue - there is an unexpected trailing comma after each option. Strangely, I did not add these commas in the template and I cannot figure out where they are coming from.
Initially, I suspected it could be due to a script, but even after isolating the problem, the issue continues to persist.
const options = [
"User-friendly",
"Interactive",
"Accessible",
"Other (Specify below)"
];
const template = `
<div class="question-title">sdjhaskjdhakjs</div>
<div class="question-options">${options?.map((option, i) => {
return `
<div class="question-option">
<input class="${"id"}-feedback-question-option" type="radio" id="${"id"}-${option}" name="option" value="${option}" ${
options.length === i - 1 ? "checked" : ""
} />
<label for="${"id"}-${option}">${option}</label>
</div>`;
})}</div>
`;
document.getElementById("app").innerHTML = template;.question-title {
position: relative;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
font-size: 16px;
}
.question-options {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
font-size: 12px;
gap: 10px;
flex-warp: warp;
}
.question-option {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.question-option>label {
margin-bottom: unset;
}
input[type=radio]::after {
content: '';
}<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
</body>
</html>