Así que actualmente tengo una tarjeta que tiene algunos botones de radio con el nombre = "radio-0" quiero cuando clone la tarjeta que todos los botones de radio cambien a name = "radio-1" por ejemplo
He creado una función que obtiene el último hijo del elemento, pero no funciona y solo funciona una vez.
Mi violín https://jsfiddle.net/abdotamer3/s57jauxw/22/
Mi función:
function nameRadioButtons(clone, radioButtons) { var allQuestions = clone.querySelector(".radioItemToggle:last-child"); var radioID = allQuestions.getAttribute("name").split("-")[1]; console.log(radioID) radioButtons.forEach((element, index) => { radioID =+ 1 element.setAttribute("name", "radio-" + radioID.toString()); }); }Mi función de clonación:
function cloneQuestion() { var question = document.querySelector(".questions"); var clone = $(question).clone(true, true).get(0); var numItems = $(".questions").closest(".radioListItemPrimaryContent").length; var radioButtons = question.querySelectorAll(".radioItemToggle"); console.log(numItems); nameRadioButtons(clone, radioButtons); clone.querySelector(".questionMainTextArea").value = "Untitled Question"; var addBtn = document.querySelector(".addQuestionBtnRow"); var tbody = addBtn.parentNode; tbody.insertBefore(clone, addBtn); }Cree una variable global para almacenar el índice de preguntas máximo actual y agréguele 1 cada vez antes de establecer el nuevo nombre.
let radioGroupIndex = 0 function nameRadioButtons(clone) { radioGroupIndex++ clone.querySelectorAll('input[type=radio]').forEach(_radio => { _radio.setAttribute('name', `radio-${radioGroupIndex}`) }) }