JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<form
id="form1"
action=""
method="post"
style=""
>
<h3><b>cc</b></h3>
<input type="radio" name="simple" value="{{ choice.id }}" /> ccca
<input type="radio" name="simple" value="{{ choice.id }}" /> cccb
<span id="desc_choice_{{ choice.id }}"></span>
<br />
<p style="display:none;" id="result_question_{{ question.id }}"></p>
<input class="formsubmit" type="submit" value="Repondre" />
<hr />
</form>
<form
id="form2"
action=""
method="post"
style="display:none;"
>
<h3><b>cc</b></h3>
<input type="radio" name="simple" value="{{ choice.id }}" /> ccca
<input type="radio" name="simple" value="{{ choice.id }}" /> cccb
<span id="desc_choice_{{ choice.id }}"></span>
<br />
<p style="display:none;" id="result_question_{{ question.id }}"></p>
<input class="formsubmit" type="submit" value="Repondre" />
<hr />
</form>
</div>
JavaScript
$(document).ready(function() {
$('.formsubmit').click(function(e) {
e.preventDefault();
var form = $(this).parent('form');
manageResponse.result(true, form);
});
$(".container").on('click', '.nextQ', function(e)
console.log($(this));
console.log($(this).next('form')) // prints nothing?...
});
});
var manageResponse = {
result: function(result, form) {
$resultField = form.find('p');
$resultField.show();
$resultField.html(result === true ? '<span style="color:green"> good </span>' : '<span style="color:red">false </span>');
form.find('.formsubmit').hide();
console.log(form.next('form'));
(typeof(form.next('form') !== undefined)) ? $resultField.append('<p><a class="nextQ" href="#">Next ?</a></p>') : '<p class="willsee">over !</p>';
}
}