JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<input type="checkbox" name="copy" id="copy_answers"> Copy Answers
<br/>
<input id="id_7-attendee_name" name="7-attendee_name" type="text" placeholder="Attendee name">
<input id="id_7-question_1" name="7-question_1" type="number" placeholder="Age">
<br/>
<input id="id_8-attendee_name" name="8-attendee_name" type="text" placeholder="Attendee name">
<input id="id_8-question_1" name="8-question_1" type="number" placeholder="Age">

JavaScript

$(function(){
    $("#copy_answers").change(function() {
        if ($("#copy_answers:checked").length > 0) {
            bindGroups();
        } else {
            unbindGroups();
        }
    });
});
var elements = $("[id^=id_]");
var bindGroups = function() {
    for(var i=3; i<=elements.length; i++) {
    		// First copy values
        console.log(elements.eq(1).val());
    		if (elements[i-1])
    			elements.eq(i-1).val(elements.eq(0).val());  
        if (elements[i])
    			elements.eq(i).val(elements.eq(1).val());  
        
        // Then bind fields
        elements.eq(0).keyup(function() {
            elements.eq(i-1).val($(this).val());
        });
        elements.eq(1).keyup(function() {
            elements.eq(i).val($(this).val());
        });        
    }    
};

var unbindGroups = function() {
		for(var i=0; i<elements.length; i++) {
    		elements.eq(i).unbind("keyup");     
    } 
};