Removing readonly and disabled attributes from individual forms

Question

I am currently using a nice bit of JavaScript code to remove the 'readonly' and 'disabled' attributes from several form fields in a single form for 'editing/updating' purposes.

The code works fine when I only have a single form on a page. But I would like to be able to have multiple forms on a single page, each with its own 'edit button', which should remove only the attributes from its respective form.

In the example forms I have posted... I included a 'form_1' and a 'form_2'. With each form having its own edit button (respectively; editBt_1 and editBtn_2).

I have tried several things to modify the JS code, so the individual edit buttons would only remove the attributes from their respective forms. But so far, I have not been able to do so respectively.

Any ideas would be helpful at this point.

const button = document.querySelector('#editBtn_1');
const elements = document.querySelectorAll('input, textarea, select');

button.addEventListener('click', () => {
  elements.forEach((element) => {
    element.removeAttribute('readonly');
    element.removeAttribute('disabled');
  });
});

<h2>Form One</h2>

<form id="form_1" action="nextPage_1.php" method="POST">
  <input type="text" name="dataField_A" readonly /><br /><br />

  <input type="text" name="dataField_B" readonly /><br /><br />

  <button form="none" id="editBtn_1" name="editBtn_1">Edit</button>

  <button type="submit" form="form_1" id="form_1_Btn" name="form_1_Btn">
        Submit
      </button>
</form>
<br />

<h2>Form Two</h2>

<form id="form_2" action="nextPage_2.php" method="POST">
  <input type="text" name="dataField_C" readonly /><br /><br />

  <select name="dataSelect_D" disabled>
    <option value="D1">D1</option>
    <option value="D2">D1</option>
    <option value="D3">D1</option>
  </select><br /><br />

  <textarea name="textarea_E" readonly></textarea><br /><br />

  <button form="none" id="editBtn_2" name="editBtn_2">Edit</button>

  <button type="submit" form="form_2" id="form_2_Btn" name="form_2_Btn">
        Submit
      </button>
</form>
<br />

Answer 1

You can use the event object from the button click event to access its parent element (which is the form element in your example code) and use a foreach loop to loop thru each child element to remove its attributes:

const buttons = document.querySelectorAll('button[id^="editBtn_"]');

buttons.forEach((button) => {
  button.addEventListener('click', (e) => {
    const form = e.currentTarget.parentElement;
    Array.from(form.elements).forEach((el) => {
      el.removeAttribute('readonly');
      el.removeAttribute('disabled');
    });
  });
});

<h2>Form One</h2>

<form id="form_1" action="nextPage_1.php" method="POST">
  <input type="text" name="dataField_A" readonly /><br /><br />

  <input type="text" name="dataField_B" readonly /><br /><br />

  <button form="none" id="editBtn_1" name="editBtn_1">Edit</button>

  <button type="submit" form="form_1" id="form_1_Btn" name="form_1_Btn">
        Submit
      </button>
</form>
<br />

<h2>Form Two</h2>

<form id="form_2" action="nextPage_2.php" method="POST">
  <input type="text" name="dataField_C" readonly /><br /><br />

  <select name="dataSelect_D" disabled>
    <option value="D1">D1</option>
    <option value="D2">D2</option>
    <option value="D3">D3</option>
    <option value="D4">D4</option>
  </select><br /><br />

  <textarea name="textarea_E" readonly></textarea><br /><br />

  <button form="none" id="editBtn_2" name="editBtn_2">Edit</button>

  <button type="submit" form="form_2" id="form_2_Btn" name="form_2_Btn">
        Submit
      </button>
</form>
<br />