JSFiddle - React, Tailwind, and code Playground
HTML
<div data-duplicate="phone" class="container-answer">
<p class="pull-right"><i class="fa fa-times-circle fa-fw fa-lg remove" data-duplicate-remove="phone"></i></p>
<div class="form-group">
<div class="col-xs-12">
<input name="answer_title[]" placeholder="Answer" class="form-control answer_title" /> <br />
<textarea name="answer_description[]" class="form-quiz form-control answer_description"></textarea>
<input type="radio" value="0" name="quiz_item_correct[]" class="quiz_item_correct">
</div>
</div>
</div>
<p class=" pull-right"><button data-duplicate-add="phone" class="btn btn-primary btn-xs">+ add</button></p>
<br />
JavaScript
/** https://github.com/ReallyGood/jQuery.duplicate */
$.duplicate = function(){
var body = $('body');
body.off('duplicate');
var templates = {};
var settings = {};
var init = function(){
$('[data-duplicate]').each(function(){
var name = $(this).data('duplicate');
var template = $('<div>').html( $(this).clone(true) ).html();
var options = {};
var min = +$(this).data('duplicate-min');
options.minimum = isNaN(min) ? 1 : min;
options.maximum = +$(this).data('duplicate-max') || Infinity;
options.parent = $(this).parent();
settings[name] = options;
templates[name] = template;
});
body.on('click.duplicate', '[data-duplicate-add]', add);
body.on('click.duplicate', '[data-duplicate-remove]', remove);
};
function add(){
var targetName = $(this).data('duplicate-add');
var selector = $('[data-duplicate=' + targetName + ']');
var target = $(selector).last();
if(!target.length) target = $(settings[targetName].parent);
var newElement = $(templates[targetName]).clone(true);
if($(selector).length >= settings[targetName].maximum) {
$(this).trigger('duplicate.error');
return;
}
target.after(newElement);
$(this).trigger('duplicate.add');
}
function remove(){
var targetName = $(this).data('duplicate-remove');
var selector = '[data-duplicate=' + targetName + ']';
var target = $(this).closest(selector);
if(!target.length) target = $(this).siblings(selector).eq(0);
if(!target.length) target = $(selector).last();
if($(selector).length <= settings[targetName].minimum) {
$(this).trigger('duplicate.error');
return;
}
target.remove();
$(this).trigger('duplicate.remove');
}
$(init);
};
$.duplicate();
/----------------- code on change ------------------/
$("body").on('change',"input[name='quiz_item_correct\\[\\]']",
function(){
if...