why the functionality of the tabs not working?

I'm a beginner web developer learning front end development. Recently I was working on a project from front end mentor, It has a functionality which, if the name of a tab is clicked the content will be updated. I tried, But it's not working.

<section class="features">
    <div>
      <h2>Features</h2>
      <p>Our aim is to make it quick and easy for you to access your favourite websites.
        Your bookmarks sync between your devices so you can access them on the go.</p>
    </div>


  </section>

  <section id="allTabs" class="allTabs">


    <div class="btn-container">

      <button class="tab-btn  active" id="tab1">Simple Bookmarking</button>
      <button class="tab-btn" id="tab2">Speedy Searching</button>
      <button class="tab-btn" id="tab3">Easy Sharing</button>
    </div>
    <div class="tab active" id="tab1">
      <img class="tab-img" src="./images/illustration-features-tab-1.svg" alt="">
      <article>

        <h3 class="tab-title">Bookmark in one click</h3>
        <p class="tab-text">Organize your bookmarks however you like. Our simple drag-and-drop interface
          gives you complete control over how you manage your favourite sites.</p>
        <button class="tab-btn-more-info">More Info</button>
      </article>
    </div>

    <div class="tab" id="tab2">
      <img class="tab-img" src="./images/illustration-features-tab-2.svg" alt="">
      <article>
        <h3 class="tab-title">Intelligent search</h3>
        <p class="tab-text">Our powerful search feature will help you find saved sites in no time at all.
          No need to trawl through all of your bookmarks.</p>
        <button class="tab-btn-more-info">More Info</button>
      </article>
    </div>


    <div class="tab" id="tab3">
      <img class="tab-img" src="./images/illustration-features-tab-3.svg" alt="">
      <article>

        <h3 class="tab-title">Share your bookmarks</h3>
        <p class="tab-text">Easily share your bookmarks and collections with others. Create a shareable
          link that you can send at the click of a button.</p>
        <button class="tab-btn-more-info">More Info</button>
      </article>
    </div>
  </section>

.tab {
    display: none;
}


.tab-btn.active {
    border-bottom: 3px solid hsl(0, 94%, 66%);
}


.tab.active {
display: flex;
    margin-left: 4.2rem;
    margin-right: 4.2rem;
    

}

const allTabs = document.querySelector(".allTabs");
const btnsAll = document.querySelectorAll(".tab-btn");
const articles = document.querySelectorAll(".tab");

allTabs.addEventListener("click", function (e) {
  const id = e.target.dataset.id;
  if (id) {
    // remove active from other buttons
    btnsAll.forEach(function (btn) {
      btn.classList.remove("active");
      e.target.classList.add("active");
    });
    // hide other all articles
    articles.forEach(function (article) {
      article.classList.remove("active");
    });
    const element = document.getElementById(id);
    element.classList.add("active");
  }
});

This is the code. Can anyone fix this.This CSS code adds styles to the active tabs and their corresponding articles. When a tab is clicked, the .active class is added to both the .tab-btn button and the .tab article, which triggers the styles specified in this CSS code.

The styles included in this code are:

border-bottom: 3px solid hsl(0, 94%, 66%);: Adds a colored bottom border to the active tab button to indicate which tab is currently selected.

margin-left: 4.2rem; margin-right: 4.2rem; display: flex;: Adds some margin to the left and right of the active tab article, and sets its display to flex to allow for more flexible positioning.

display: block; justify-content: left;: Sets the display to block for the active article and aligns its content to the left.

text-align: left; display: block; margin-top: 6rem; padding-left: 3rem;: Adds some margin and padding to the left of the active article's title and aligns it to the left.

text-align: left; padding-left: 1.4rem;: Aligns the active article's text to the left and adds some padding to its left.

display: block; margin-left: 3rem; margin-top: 2rem;: Positions the "More Info" button for the active article by adding some margin to its left and top.

This is a piece of HTML code that defines a section with the id "alltabs" and the class "allTabs". Inside this section, there is a container with three buttons that have the class "tab-btn" and the ids "tab1", "tab2", and "tab3". The first button has the class "active" which indicates it is the default active tab.

Each button represents a feature and when a user clicks on one of them, it activates the corresponding tab, which has the same id as the button. The tab contains an image and an article with a title, a paragraph of text, and a button with the class "tab-btn-more-info".

The purpose of this code is likely to create a user interface for a website or application that allows users to manage their bookmarks by providing features such as one-click bookmarking, intelligent search, and easy sharing. The tab system provides a way to present and switch between different features without cluttering the interface.

The only mistake that you are doing is you are using id instead of data-id on the buttons so it should be

CODESANDBOX DEMO

<div class="btn-container">
                                   // CHANGE data-id instead of id
	<button class="tab-btn active" data-id="tab1">Simple Bookmarking</button>
	<button class="tab-btn" data-id="tab2">Speedy Searching</button>
	<button class="tab-btn" data-id="tab3">Easy Sharing</button>
</div>