JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://kit.fontawesome.com/821c0050a0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.2.0/mdb.min.css">
<div id="content_list_container">
  <h3>Items list</h3>
  <div class="accordion accordion-flush" id="content_accordion">


    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-heading-1">
        <div class="accordion-button collapsed d-flex" data-bs-toggle="collapse" data-bs-target="#item_1" aria-expanded="false" aria-controls="#item_1">
          <h5 class="content_title fw-bold">Title 1</h5>
          <div class="ms-auto">
            <span class="fa fa-pencil-alt cercle-icons edit-icon" data-app-id="1" data-content-id="1" aria-hidden="true"></span>
            <span class="far fa-trash-alt cercle-icons delete-icon" data-app-id="1" data-content-id="1" aria-hidden="true"></span>
          </div>
        </div>
      </h2>
      <div id="item_1" class="accordion-collapse collapse" aria-labelledby="flush-heading-1" data-bs-parent="#content_accordion">
        <div class="accordion-body content_text">Content 1</div>
      </div>
    </div>

    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-heading-2">
        <div class="accordion-button collapsed d-flex" data-bs-toggle="collapse" data-bs-target="#item_2" aria-expanded="false" aria-controls="#item_2">
          <h5 class="content_title...

CSS

body {
  font-family: 'Titillium Web', sans-serif;
}

.accordion-button::after {
  margin-left: 1.1rem;
}

.cercle-icons {
  color: white;
  cursor: pointer;
  border-radius: 50%;
  font-size: 0.95em;
  padding: 8px;
  box-sizing: border-box;
  transition: 150ms ease-out;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25);
}

.cercle-icons:hover {
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
  transition: 150ms ease-in;
}

.edit-icon {
  background-color: #344eaa;
}

.delete-icon {
  background-color: #bf2611;
}

#content_list_container {
  padding: 2rem;
}

JavaScript

const editBtns = document.querySelectorAll(".edit-icon");
const deleteBtns = document.querySelectorAll(".delete-icon");


editBtns.forEach(btn => {
	btn.addEventListener('click', (e) => {
    e.stopImmediatePropagation();
    e.preventDefault();
    console.log(btn.dataset.contentId);
  })
})


deleteBtns.forEach(btn => {
	btn.addEventListener('click', (e) => {
    e.stopImmediatePropagation();
    e.preventDefault();
    console.log(btn.dataset.contentId);
  })
})