jQuery If checkbox in foreach loop is checked, include checkboxes and input values within that loop

I am creating a php form with a foreach loop which creates a checkbox with several other checkboxes and input fields within the foreach loop. The loop might repeat several times, creating several sets of checkboxes, however I only want to include the checked checkbox and associated fields, not all of those within every loop.

My code below is incorrect as it is gathering all of the data from every loop. I understand this is because the input fields are populated with data, so the data is added to the array.

I think I need to add an 'if' statement to my jQuery, but I'm not sure how? I have tried changing the jQuery line 'if (checkbox.is(":checked"))' with the below line of code without success.

if ($("input[data-name='servicetitle[]'").prop(":checked")) {

jQuery:

let values = [];
    
$("div[data-name='sup-checkbox-title[]'], div[data-name='sup-input[]'], div[data-name='sup-input-date[]'], div[data-name='sup-checkbox[]'], div[data-name='sup-input-costs[]']").each(function() {
            
const label = $(this).find('label');
const checkbox = $(this).find('input[type="checkbox"]');
const input = $(this).find('input[type="text"]');
const date = $(this).find('input[type="date"]');
            
if (checkbox.is(":checked")) {
   values.push(label.html(), checkbox.val());
}
            
if (input.val()) {
   values.push(label.html(), input.val());
}
                    
if (date.val()) {
   values.push(label.html(), date.val());
}
                    
});

PHP:

foreach ( $order->get_items() as $item_id => $item ) {

         // Main checkbox to check if selected
         echo '<div data-name="sup-checkbox-title[]">';
         echo '<label for="servicetitle">Service:</label><br>';
         echo '<input type="checkbox" id="servicetitle" data-name="servicetitle[]" value="' . $item->get_name() . '"><span>' . $item->get_name() .'</span><br>';
         echo '</div><br>';

         // Sub checkboxes and input fields to include in array if above checkbox checked
         echo '<div data-name="sup-input[]"><br>';
         echo '<label for="weightallowance">Weight Allowance Per Bin:</label><br>';
         echo '<input type="text" id="weightallowance" value="Weight1" ><br>';
         echo '</div><br>';

         echo '<div data-name="sup-input-date[]">';
         echo '<label for="servicestartdate">Service Start Date:</label><br>';
         echo '<input type="date" id="servicestartdate" class="sup-required"><br>';
         echo '</div><br>';

         echo '<div data-name="sup-checkbox[]">';
         echo '<label for="routenumberAln1">Route Number:</label><br>';
         echo '<input type="checkbox" id="routenumberAln1" value="Aln1" >Aln1<br>';
         echo '</div><br>';

         echo '<div data-name="sup-input-costs[]">';
         echo '<label for="supplierpriceperlift">Supplier Price Per Lift:</label><br>';
         echo '<input type="text" id="supplierpriceperlift" value="£16.75"><br>';
         echo '</div><br>';      

}