Multiple checkbox’s with multiple dropdowns and input tags, store selected values together/remove if unchecked

Lets say I have multiple checkbox’s and some text and then a dropdown from 1-10 in the following format

[CHECKBOX1]   [NAME1]    [DROPDOWN1 1-10]

[CHECKBOX2]   [NAME2]    [DROPDOWN2 1-10]

[CHECKBOX3]   [NAME3]    [DROPDOWN3 1-10]

.....

[CHECKBOXN]   [NAMEN]    [DROPDOWNN 1-10]

I know I can capture the checked values into an array like the following

arr.push(document.querySelector('.messageCheckbox').checked); 

and similar I can do it for NAME1,and the :selected option for the values 1-10.

However how do I map each rows values to each other? So if I checkbox1 I will push the typed in Name1, selected dropdown1 ( from 1-10) into one item into an array? Similar say for N checkbox’s. I will hope to get some data in the end like

IF 3 CHECKEDBOXS are CHECKED: {{BOB,2} , {SARAH,5}, {LILY,5}}

Similarly if i uncheck a box, those items would be removed from this array