An easy solution is to keep track of the nodeList indexes with an Array. I made one for you called openDetails. Then when u open a detail it gets added to the array. When u close it, it gets removed. When u have 3 items u can check the first item of the list, close the corresponding detail and then remove it from the list.

let openDetails = [];

const details = document.querySelectorAll("details");

details.forEach((targetDetail, index) => {
  targetDetail.addEventListener("click", (event) => {
    const detailIsOpen = openDetails.includes(index);

    if (detailIsOpen) {
      openDetails = openDetails.filter((item) => item !== index);
    } else {

      if (openDetails.length > 2) {
        const indexToClose = openDetails[0];
        openDetails = openDetails.filter((item, i) => i !== 0);
        details[indexToClose].removeAttribute("open");
      }

      openDetails.push(index);
    }

  });
});

<details>
  <summary>test0</summary>
  0
</details>

<details>
  <summary>test1</summary>
  1
</details>
<details>
  <summary>test2</summary>
  2
</details>
<details>
  <summary>test3</summary>
  3
</details>

Instead of this,

  const details = document.querySelectorAll("details");
            details.forEach((targetDetail) => {
                targetDetail.addEventListener("click", () => {
                    details.forEach((detail) => {
                        if (detail !== targetDetail) {
                            detail.removeAttribute("open");
                        }
                    });
                });
            });

Try This One, might work for you😉

 const details = document.querySelectorAll("details");
    details.forEach((targetDetail) => {
        targetDetail.addEventListener("click", () => {
            details.forEach((detail) => {
                if (detail !== targetDetail) {
                    details.forEach(element => {
                        element.removeAttribute("open");
                    });
                }
            });
        });
    });