JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div class="first-div">
    <h5>text1</h5>
  </div>
  <div class="first-div">
    <h5>text2</h5>
  </div>
  <div class="first-div">
    <h5>text3</h5>
  </div>
</section>

<section class="text">
  <div class="textbox">

  </div>
</section>

CSS

body {
      padding: 3em;
    }

    .first-div {
      padding: 0.5em 1.5em;
      background-color: silver;
      margin: 2em 0;
      border: 2px solid silver;
    }

    .div2 {
      border-color: red;
    }

    .text {
      margin-top: 3em;
      padding: 1em;
    }

    .textbox {
      padding: 1.5em;
    }

JavaScript

$(".first-div").on('click', function() {
   $(this).toggleClass("div2 active");

   let matn = $("<h3>" + $(this).html() + "</h3>");

   if ($(this).hasClass("active")) {
     $(".textbox").append(matn);
   } else {
     $(".textbox").find("h5:contains(" + $(this).text().trim() + ")").remove();
   }

 })