switches inputs are multiplying after I've edited the form

Question

On my page I have the create action form and then I can edit the form's data. When I edit a created form and I hit save, if I go to create a form, a switch input is added, and so on. Every time I edit an existing form and I save it, an input is added.

This is on create form and the edit form is the same.

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.switchery');

  elems.forEach(function(html) {
    var switchery = new Switchery(html);
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css" integrity="sha512-uyGg6dZr3cE1PxtKOCGqKGTiZybe5iSq3LsqOolABqAWlIRLo/HKyrMMD8drX+gls3twJdpYX0gDKEdtf2dpmw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="form-group ">
  <span>
    <input type="checkbox" class="switchery" name="eligible_for_adam_intop" />
    <label  class="control-label"> Eligible for <b>  <span class="label" style="color:#FFF;background-color: #31B724; font-size:15px;"> Adam Intop</span></b>
  </label>
  </span>

  <span class="pl-5">
    <input type="checkbox" class="switchery" name="status" />
    <label  class="control-label"> Activate Action  </label>
  </span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js" integrity="sha512-lC8vSUSlXWqh7A/F+EUS3l77bdlj+rGMN4NB5XFAHnTR3jQtg4ibZccWpuSSIdPoPUlUxtnGktLyrWcDhG8RvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>