make the button to toggle specific class Javascript

Question

basically I am not a coder. I just trying to learn about Javascript and is it possible to make a toggle to a specific class?

for HTML

 <section class="book_shelf">
    <h2>Unfinished Section</h2>
    
    <div id="incompleteBookshelfList" class="book_list">
    <article class="book_item">
      <h3>Book Title</h3>
      <p>Penulis: John Doe</p>
      <p>Tahun: 2002</p>

      <div class="action">
      <button class="green">Finished</button>
      <button class="green">Edit</button>
      <button class="red">Delete</button>
      </div>
      <section class="input_section edit_section">
        <form id="editBook">
          <div class="input">
            <input id="editTitle" required="">
            <input id="editAuthor" required="">
            <input id="editYear" required="">
              
            </div>
          <div class="action">
            <button class="black">Cancel</button>
            <button class="grey">Save</button></div>           </form>
              
      </section>
    </article>
      
    <article class="book_item">
      <h3>Book Title2</h3>
      <p>Penulis: John Doe</p>
      <p>Tahun: 2002</p>

      <div class="action">
      <button class="green">Finished</button>
      <button class="green">Edit</button>
      <button class="red">Delete</button>
      </div>
      <section class="input_section edit_section">
        <form id="editBook">
          <div class="input">
            <input id="editTitle" required="">
            <input id="editAuthor" required="">
            <input id="editYear" required="">
              
            </div>
          <div class="action">
            <button class="black">Cancel</button>
            <button class="grey">Save</button></div>           </form>
              
      </section>
    </article>
      
    <article class="book_item">
      <h3>Book Title 3</h3>
      <p>Penulis: John Doe</p>
      <p>Tahun: 2002</p>

      <div class="action">
      <button class="green">Finished</button>
      <button class="green">Edit</button>
      <button class="red">Delete</button>
      </div>
      <section class="input_section edit_section">
        <form id="editBook">
          <div class="input">
            <input id="editTitle" required="">
            <input id="editAuthor" required="">
            <input id="editYear" required="">
              
            </div>
          <div class="action">
            <button class="black">Cancel</button>
            <button class="grey">Save</button></div>           </form>
              
      </section>
    </article>
      
    <br>
   </div>
</section>

for CSS

.edit_section {
  margin-top: 20px;
  display: none;
}
.edit_section.active {
  display: block;
}

so my objective is when I click the edit button, the class edit_section has an active class, but the other edit_section classes from another article tag still collapsed. Is that possible without ID tag? I need to do it with pure JavaScript, Thanks guys.