JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<form name="formName">
    <input type="text" name="a1">
    <br>
    <input type="text" name="a2">
    <br>
    <input type="text" name="a3">
    <br>
    <input type="checkbox" name="copy" id="copyCheck"> Copy Group 1
    <br>
    <input type="text" name="b1">
    <br>
    <input type="text" name="b2">
    <br>
    <input type="text" name="b3">
    <br>
    <input type="submit">
</form>

JavaScript

$(function(){
    $("#copyCheck").change(function() {
        if ($("#copyCheck:checked").length > 0) {
            bindGroups();
        } else {
            unbindGroups();
        }
    });
});

var bindGroups = function() {
    // First copy values
    $("input[name='b1']").val($("input[name='a1']").val());
    $("input[name='b2']").val($("input[name='a2']").val());
    $("input[name='b3']").val($("input[name='a3']").val());

    // Then bind fields
    $("input[name='a1']").keyup(function() {
        $("input[name='b1']").val($(this).val());
    });
    $("input[name='a2']").keyup(function() {
        $("input[name='b2']").val($(this).val());
    });
    $("input[name='a3']").keyup(function() {
        $("input[name='b3']").val($(this).val());
    });
};

var unbindGroups = function() {
    $("input[name='a1']").unbind("keyup");
    $("input[name='a2']").unbind("keyup");
    $("input[name='a3']").unbind("keyup");
};