Required for dynamically created checkbox using JavaScript not working

I have created a checkbox dynamically using vanilla JavaScript. What I am trying to do is, if no element is selected, it should return an HTML tooltip on the form submit button but it is not working.

Dynamically Generated HTML is:

<form>
    <div id="div_drager">
      <div id="cardDiv_1" class="card p-3 my-3">
        <div class="d-flex justify-content-between">
          <label class="question-input-label" placeholder="Question" id="Question_Input_1">please enter your email</label>
        </div>
        <div id="bodyWrapper_1" class="body-wrapper" required>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_0">
              <input id="cardDiv_1_divCheckbox_0_checkbox_0" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_0_checkboxOption_0" class="radio-label-label">Option 1</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_1">
              <input id="cardDiv_1_divCheckbox_1_checkbox_1" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_1_checkboxOption_1" class="radio-label-label">Option 2</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_2">
              <input id="cardDiv_1_divCheckbox_2_checkbox_2" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_2_checkboxOption_2" class="radio-label-label">Option 3</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" id="bodyWrapper_1_divCheckbox_6">
              <input id="bodyWrapper_1_divCheckbox_6_checkbox_6" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="bodyWrapper_1_divCheckbox_6_checkboxOption_6" class="radio-label-label">Option 6</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input type="submit"/>
  </form>

Can anyone help me to identify what went wrong?

Thanks.