How to select the first matching input on page load?

Question

JavaScript

We have the following code

<div class="group-options">
    <div class="group-options__item">
        <input type="radio" name="group-1">
        <input type="radio" name="group-1" data-prop="prop1">
        <input type="radio" name="group-1" data-prop="prop1">
    </div>
    <div class="group-options__item">
        <input type="radio" name="group-2" data-prop="prop2">
        <input type="radio" name="group-2" data-prop="prop2">
        <input type="radio" name="group-2" data-prop="prop2">
    </div>
</div>
<div class="group-options">
    <div class="group-options__item">
        <input type="radio" name="group-3">
        <input type="radio" name="group-3">
    </div>
    <div class="group-options__item">
        <input type="radio" name="group-4">
        <input type="radio" name="group-4" data-prop="prop4">
        <input type="radio" name="group-4" data-prop="prop4">
    </div>
</div>
<div class="group-options__item">
    <input type="radio" name="group-5">
    <input type="radio" name="group-5" data-prop="prop5">
    <input type="radio" name="group-5" data-prop="prop5">
</div>
<div class="group-options__item">
    <input type="radio" name="group-6" data-prop="prop6">
    <input type="radio" name="group-6" data-prop="prop6">
</div>

As you can see from it, there are group-options__item that contain radio buttons, and they themselves may or may not be descendants of group-options. Also, some radiobuttons have a date attribute data-prop.
The question is how to make it so that when the page is loaded in group-options__item, the first element with data-prop is selected, but if group-options__item is a child of group-options, then the first suitable element is not selected among only one group-options__item, and among all such blocks belonging to the same group-options.

That is, in the end it would be like this (using the example of the first code):

<div class="group-options">
    <div class="group-options__item">
        <input type="radio" name="group-1">
        <input type="radio" name="group-1" data-prop="prop1" checked>
        <input type="radio" name="group-1" data-prop="prop1">
    </div>
    <div class="group-options__item">
        <input type="radio" name="group-2" data-prop="prop2">
        <input type="radio" name="group-2" data-prop="prop2">
        <input type="radio" name="group-2" data-prop="prop2">
    </div>
</div>
<div class="group-options">
    <div class="group-options__item">
        <input type="radio" name="group-3">
        <input type="radio" name="group-3">
    </div>
    <div class="group-options__item">
        <input type="radio" name="group-4">
        <input type="radio" name="group-4" data-prop="prop4" checked>
        <input type="radio" name="group-4" data-prop="prop4">
    </div>
</div>
<div class="group-options__item">
    <input type="radio" name="group-5">
    <input type="radio" name="group-5" data-prop="prop5" checked>
    <input type="radio" name="group-5" data-prop="prop5">
</div>
<div class="group-options__item">
    <input type="radio" name="group-6" data-prop="prop6" checked>
    <input type="radio" name="group-6" data-prop="prop6">
</div>

At the moment, I can find the radio button I need and make it selected within only one group-options__item, but I cannot select only the one I need if they are in group-options.

const wrappers = document.querySelectorAll('.group-options__item');

const selectNoEmptyButton = wrapper => {
  const elements = wrapper.querySelectorAll('input[type="radio"]');
  const notEmptyElement = [...elements].find(element => !!element.getAttribute('data-prop'));

  notEmptyElement.setAttribute('checked', 'checked');
};

[...wrappers].forEach(wrapper => selectNoEmptyButton(wrapper));

Answer 1

$('.group-options__item').each(function() {
  const $this = $(this);
  const $group = $this.closest('.group-options');
  ($group.length ? $group : $this).find('[data-prop]').first().prop('checked', true);
});

or

Array
  .from(
    document.querySelectorAll('.group-options__item'),
    n => (n.closest('.group-options') || n).querySelector('[data-prop]')
  )
  .filter(Boolean)
  .forEach(n => n.checked = true);