I'm having trouble making a jquery array with "each" to save the input values contained within a list, in the following format:
Note: In the list of questions, each question has a sublist with the alternatives.
<ul class="questoes">
<li class="questao">
<div class="row">
<div class="left-col col col-md-11">
<input type="number" name="numero_questao" class="form-input num_quest" style="max-width: 160px" placeholder="Nº da questão" data-chave="numero_questao">
</div>
<div class="right-col col-6 col-md-1">
<i data-toggle="collapse" data-parent="#accordion" href="#collapse-questao" aria-expanded="true" aria-controls="collapse-questao" class="questoes_arrow fa fa-caret-up" aria-hidden="true"></i></a>
</div>
</div>
<div id="collapse-questao" class="collapse questoes_arrow_container show" role="tabpanel" aria-labelledby="heading-questao">
<div class="questao-body" id="questao">
<h4 class="h5">Enunciado da questão: </h4>
<textarea name="enunciado" class="form-control enunciado" data-chave="enunciado">Enunciado da questão</textarea>
<div class="line"></div>
<h4 class="h5">Alternativas da questão: </h4>
<ul id="alternativas">
<li class="alternativa">
<input type="text" class="form-control" value="a" style="max-width: 200px" placeholder="Indice da alternativa" data-chave="indice">
<div class="alternativa-body">
<h4 class="h5">Enunciado da alternativa: </h4>
<textarea name="enunciado_alternativa" class="form-control" data-chave="descricao">Descrição da alternativa</textarea>
<div class="align-items-center"><input type="checkbox" name="correta" value="1" data-chave="correta"> Esta é a alternativa correta.</div>
</div>
</li>
<li class="alternativa">
<input type="text" class="form-control" style="max-width: 200px" value="b" placeholder="Indice da alternativa" data-chave="indice">
<div class="alternativa-body">
<h4 class="h5">Enunciado da alternativa: </h4>
<textarea name="enunciado_alternativa" class="form-control" data-chave="descricao">Descrição da alternativa</textarea>
<div class="align-items-center"><input type="checkbox" name="correta" value="1" data-chave="correta"> Esta é a alternativa correta.</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
I have tried in several ways, I started doing this to try to save only the alternatives to do a test and neither did it work:
var questoes = Array();
$("#alternativas li").each(function () {
var alternativas = {}
$(this).find('input').each(function () {
alternativas[$(this).attr('data-chave')] = $(this).val();
});
questoes.push(alternativas);
});
To make it clear, this is a questionnaire and as such has 'N' questions and each question 'N' alternatives. The idea is to form the questionnaire, the user will iteratively add the questions and alternatives and this is already working with append, the problem is that I need to get the values of the inputs and organize in an array and I am not able to do that