Syncing checkboxes from two forms that are dynamically generated in jQuery

I am trying to synchronise two forms with checkboxes that both contain the same amount of checkboxes, so I am trying to link them. The reason is, so I can hide one form and use the other form to send information to the API. The checkboxes are generated through an API, so I can not use hardcoded ID's. I can however link them with the value of the first set of checkboxes, and in the second form, I give the checkboxes the same ID as the value in the first form of checkboxes. However, I am struggling to sync the two.

The second problem is to sync the checkboxes on the first form, with the second form on page load (the idea is that a user can edit his/hers preferences).

I have tried putting the checkboxes of the second form (which will be visible) in an array, and then with loop through the array and check if it can find the value from the first form of checkboxes (which will be invisible).

$('.rss-feed-checkboxes').on('change', function() {

        var rssCheckboxesChecked = [];
        $('.rss-feed-checkboxes:checked').each(function(){
            rssCheckboxesChecked.push($(this).attr('id'));
        });
        console.log( rssCheckboxesChecked ); 

        rssCheckboxesChecked.forEach(element => {

            if ($('.mc-form-checkboxes').val() ==     
$(this).attr('id').toLowerCase()) {
                $('.mc-form-checkboxes').attr('checked',true);
            }    

        });

    });

My expected results are to synchronise the checkboxes on both forms, using the value of the checkboxes in one form, and the ID of the checkboxes in the other form, both forms dynamically generated. The actual result now is a bit messy, when I change some things, sometimes nothing is checked, or sometimes all boxes are checked.