JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <form class="person">
        <input type="text" name="name" class="name" />
        <input type="text" name="email" class="email" />
        <input type="text" name="number" class="number" />
        <input class="checkbox" type="checkbox"/>
    </form>
    <form class="person">
        <input type="text" name="name" class="name" />
        <input type="text" name="email" class="email" />
        <input type="text" name="number" class="number" />
        <input class="checkbox" type="checkbox"/>
    </form>
    <form class="person">
        <input type="text" name="name" class="name" />
        <input type="text" name="email" class="email" />
        <input type="text" name="number" class="number" />
        <input class="checkbox" type="checkbox"/>
    </form>
</div>

JavaScript

var persons = [];

$('.checkbox').on('click', function () {
    //we suppose that when they clone they validate the previous form
    //should check if each input is filled out
        var p = $(this).parent();
        persons.push(new Person({
            name: p.find('.name').val(),
            email: p.find('.email').val(),
            number: p.find('.number').val()
        }));
        console.log(persons);

});

$('.person input').on('change', function () {
    console.log('changed');
    var $this = $(this);
    var n = $this.attr('name');
    console.log(n);
    var v = $this.val();
    $.each(persons, function (a, b) {
        console.log('in loop ' + b.name + ' ' + v);
        if (n == 'name' && b.name == v) {
            console.log('name found');
            $this.next().val(b.email).next().val(b.number);
        } else if (n === 'email' && b.email === v) {

        } else if (n === 'number' && b.number === v) {

        }
    });
});

function Person(o) {
    this.name = o.name || 'unknown';
    this.email = o.email || 'unknown';
    this.number = o.number || 'unknown';
}