Create textArea elements and copy button with jquery – Blancer.com Tutorials and projects

I want to create a page containing three elements, one below the other: a text field (TextArea); a Copy button; a div element with empty initial text. And whenever the Copy button is clicked, the text typed in the TextArea should be transferred to the end of the text contained within the div. My code has a textArea, I already managed to put a copy button next to it, but I couldn’t think of a function to solve the problem. The idea is that it is solved only with jquery selectors. Finally, above this text box (textarea), the number of characters typed by the user should appear. In my js (jquery), I tried to create a function, but then I deleted it because I couldn’t. But I wanted to know how to do this.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>jQuery</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

<body>

<div class="container-fluid p-5 bg-primary text-white text-center">

  <h1>Criando páginas com jQuery</h1> 

</div>

  

<div class="container mt-5">

  <div class="row div1">

    <div class="col-sm-4 coluna1">

      <p class="classA">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

     

     

   // <p class="classB"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris... </p><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Clique aqui</button>

      

    

    

    

     

      <ul>

        <li>Coffee</li>

        <li>Tea</li>

        <li>Milk</li>

      </ul>

    </div>

    <div class="col-sm-4 coluna2">

      <p class="classC">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

      <p class="classD">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

    </div>

    <div class="col-sm-4 coluna3">      

      <p class="classE">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

      <p class="classF">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

      <ul>

        <li>item 1</li>

        <li>item 2</li>

        <li>item 3</li>

      </ul>

    </div>

  </div>

  <div class="row div2">

    <h1>x caracteres</h1>

    <div class="col-12">

    <input class="contar" type="text" value="Vamos contar os caracteres?"/> <button id="copiar" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Copiar</button>

    </div>

  </div>

  <div class="row div3">

    <ul>

        <li>C++</li>

        <li>JAVA</li>

        <li>Python</li>

        <li>HTML/CSS</li>

      </ul>

  </div>

</div>

<div class="container-fluid rodape">

</div>

<script src="jquery.js"></script>

</body>

</html>

$('button').click(function(){

    $('.classB').text('Alterado pelo click do botão') });