when using a <input> checkbox i can not use javascript to uncheck the checkbox

when making a simple form for a small project to make a fake photography page i was atempting to add a checkbox form that can be unchecked when you press the submit button after reaserch on outher posts i was unable to find a fix for my problem any help?

<div>
    <fieldset>
    <legend>Appointment scheduling</legend>
    
    <p>Your Name: <p>
    <textarea name="story" rows="1" cols="50" id='output1'> </textarea>
    <p>Your Email: <p>
    <textarea name="story" rows="1" cols="50" id='output2'> </textarea>
    <p>date:</p>
    <input type="date" id="start" name="trip-start" value="2023-06-17" min="2018-01-01" max="2035-12-31">
    <br>

    <div>
      <input type="checkbox" id="checkbox" >
      <label>Regular photoshoot</label>
    </div>

    <div>
      <input type="checkbox" id="checkbox" >
      <label>Nature/Outdoors</label>
    </div>
    
    <div>
      <input type="checkbox" id="checkbox" >
      <label>Wedding</label>
    </div>
    
    <div>
      <input type="checkbox" id="checkbox" >
      <label>senior photoshoot</label>
    </div>
    
    <div>
      <input type="checkbox" id="checkbox" >
      <label>Family photoshoot</label>
    </div>
    
    <div>
      <input type="checkbox" id="checkbox">
      <label>Pets/Animals</label>
    </div>
    
    <button class="button button1" type="button" onclick="javascript:eraseText();">Submit</button>
</fieldset>
</div>

 <script>
        function eraseText() {
          document.getElementById("output1").value = "";
          document.getElementById("output2").value = "";

          const checkbox = document.getElementById("checkbox");
          checkbox.removeAttribute('checked');
        }
  </script>

use of jquery as seen on this page https://stackoverflow.com/questions/13557623/remove-attribute-checked-of-checkbox did not change the function and did nothing to the code

id's need to be unique, so change id=checkbox to class = checkbox. then get the array of all checkboxes with document.getElementsByClassName("checkbox"). Finally put that in a loop and set checkbox[i].checked = false;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function eraseText() {
document.getElementById("output1").value = "";
document.getElementById("output2").value = "";
const checkbox = document.getElementsByClassName("checkbox");
for (i = 0; i < checkbox.length; i++) {
checkbox[i].checked = false
}
}

<!-- language: lang-html -->

<div>
<fieldset>
<legend>Appointment scheduling</legend>
<p>Your Name:
<p>
<textarea name="story" rows="1" cols="50" id='output1'> </textarea>
<p>Your Email:
<p>
<textarea name="story" rows="1" cols="50" id='output2'> </textarea>
<p>date:</p>
<input type="date" id="start" name="trip-start" value="2023-06-17" min="2018-01-01" max="2035-12-31">
<br>
<div>
<input type="checkbox" class="checkbox">
<label>Regular photoshoot</label>
</div>
<div>
<input type="checkbox" class="checkbox">
<label>Nature/Outdoors</label>
</div>
<div>
<input type="checkbox" class="checkbox">
<label>Wedding</label>
</div>
<div>
<input type="checkbox" class="checkbox">
<label>senior photoshoot</label>
</div>
<div>
<input type="checkbox" class="checkbox">
<label>Family photoshoot</label>
</div>
<div>
<input type="checkbox" class="checkbox">
<label>Pets/Animals</label>
</div>
<button class="button button1" type="button" onclick="javascript:eraseText();">Submit</button>
</fieldset>
</div>

<!-- end snippet -->

The checked attribute sets the default state of the checkbox, not the current value.

To modify the current value, assign a boolean value to the checked property.

checkbox.checked = false;