How can i appear tail in every card depends on selected option?

We have a collection of data in an array and this array contains objects .. every object has a data that supposed to be represented in a card and this card will have interactions that will append a child to the parent card body. The card will contain a heading, drop-down menu, unordered list that contains data, and a Button. The user is supposed to choose an item from the drop-down menu, then click on the button .. after clicking on the button a child will be appended to the parent card body and this child will contain the selected element with a note for this selection. I will give you an example for the collection of data to use and I will send the ui design.

`let cards = [
         {
title: "title card 1",
id: 1,
data_1: "data1",
data_2: "data2",
data_3: "data3",
items: [
  {
    title: "frontend",
    id: 1,
    note: "asdasd",
  },
  {
    title: "new",
    id: 2,
    note: "222222d",
  },
  {
    title: "back",
    id: 3,
    note: "333",
  },
 ],
},
{
title: "title card 2",
id: 2,
data_1: "data1",
data_2: "data2",
data_3: "data3",
items: [
  {
    title: "frontend",
    id: 1,
    note: "a232d 12d",
  },
  {
    title: "new",
    id: 2,
    note: "er2d",
  },
  {
    title: "back",
      id: 3,
      note: "3vvvv",
      },
     ],
     },
   ];`


the Assets that you will need primary-Color: #FF4E4E text-Color: #474747 Font-Family: Poppins (available on google fonts) Icons: you will find them on font awesome sizes and spacing are up to you .. its fine if its not pixel perfect

ui design

Mysolution is that but im stuck and cant appear tail in every card depends on selected option

let cards = [
  {
    title: "title card 1",
    id: 1,
    data_1: "data1",
    data_2: "data2",
    data_3: "data3",
    items: [
      {
        title: "frontend",
        id: 1,
        note: "asdasd",
      },
      {
        title: "new",
        id: 2,
        note: "222222d",
      },
      {
        title: "back",
        id: 3,
        note: "333",
      },
    ],
  },
  {
    title: "title card 2",
    id: 2,
    data_1: "data1",
    data_2: "data2",
    data_3: "data3",
    items: [
      {
        title: "frontend",
        id: 1,
        note: "a232d 12d",
      },
      {
        title: "new",
        id: 2,
        note: "er2d",
      },
      {
        title: "back",
        id: 3,
        note: "3vvvv",
      },
    ],
  },
];
const mainContainer = document.getElementById("cards-container");
cards.forEach((card) => {
  let elementCard = document.createElement("div");
  elementCard.classList.add("card");

  let elementCardInnerHtml = `
  <div class="card-body">
  <h4 class="card-title">${card.title}</h4>
  <label for="choose">choose</label>
  <select name="choose" id="choose">`;

  let myTasks = card.items;

  for (var task in myTasks) {
    elementCardInnerHtml += `<option value="1">${myTasks[task].title}</option>`;
  }

  elementCardInnerHtml += `</select>
  <ul class="data-list">
    <li class="data-item">${card.data_1}</li>
    <li class="data-item">${card.data_2}</li>
    <li class="data-item">${card.data_3}</li>
  </ul>
  <button class="btn" type="submit">➡</button>
</div>
  `;

  elementCard.innerHTML = elementCardInnerHtml;
  mainContainer.appendChild(elementCard);
});

* {
  box-sizing: border-box;
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  color: #474747;
}

main {
  margin: 5%;
  display: grid;
  justify-items: center;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.card {
  min-width: 310px;
  max-height: 500px;
}

.card-body {
  border: 1px solid #ff4e4e;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card-title {
  font-size: 20px;
  font-weight: 500;
  margin-top: 15px;
}

.card-body label {
  padding: 5px;
}

select {
  border: 1px solid #ff4e4e;
  color: #474747;
  border-radius: 23px;
  width: 150px;
  padding: 3px 7px;
  font-size: 17px;
  font-weight: 200;
}

.data-list {
  display: flex;
}

.data-item {
  list-style: none;
  padding: 15px;
}

.btn {
  background-color: #ff4e4e;
  border: none;
  color: #fff;
  width: 150px;
  border-radius: 23px;
  font-size: 24px;
  margin-bottom: 18px;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.9;
}

.card-tail {
  background-color: #ff4e4e;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -10px;
  z-index: -1;
}

.text-wrapper {
  padding: 15px 5px 10px 5px;
}
.text-wrapper p {
  color: #fff;
  text-align: center;
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- link style.css page to custom style the page -->
    <link rel="stylesheet" href="style.css" />
    <!-- poppins font link -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap"
      rel="stylesheet"
    />
    <title>Tribute Page</title>
  </head>
  <body>
    <!-- the main container that contains all cards -->
    <main id="cards-container">
      <!-- card container -->

      <!-- <div class="card">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <label for="choose">choose</label>
        <select name="choose" id="choose">
          <option value="frontend">frontend</option>
          <option value="new">new</option>
          <option value="back">back</option>
        </select>
        <ul class="data-list">
          <li class="data-item">data1</li>
          <li class="data-item">data2</li>
          <li class="data-item">data3</li>
        </ul>
        <button class="btn" type="submit">➡</button>
      </div>
      <div class="card-tail">
        <div class="text-wrapper hidden">
          <p>you selected <span id="selectedItem">frontend</span></p>
          <p>note for the selected option</p>
      </div>
      </div>
    </div> -->
    </main>
    <script src="main.js"></script>
  </body>
</html>