Добавьте один div только один раз, а не столько раз, сколько добавляется "li" JS

Question

У меня есть div с теми же классами, где у меня есть значение textarea. они добавляются в 'li', который добавляется к телу. Я хочу, чтобы, когда я нажимаю 'li', показываю этот текст div, когда я нажимаю второй div, показываю только второе значение div и один раз, а не дважды. Может кто-то мне помочь, пожалуйста? вот мой код например:

let value = $('.text').val();
$('.add').text(value);


$('.addNewValue').click(function() {
  $('.newValue').text($('.add').text())
})

<textarea class="text" placeholder="value"></textarea>
<ul>
  <li class="newValue"></li>
</ul>
<button class="addNewValue">Add</button>
<div class="add"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Вот как заполнить список <ul> элементами <li>, имеющими значение textarea - при нажатии кнопки:

// PS: Don't use classes if you don't refer to a reusable parent component
const $text = $("#text");
const $list = $("#list");
const $add = $("#add");

const createLi = () => {
  // Get textarea value (trimmed from whitespaces)
  const text = $text.val().trim(); 
  
  // If there's no text, exit the function here using `return`
  if (!text) return alert("Please, enter a desired text!");
  
  // else...
  $("<li>", {
    text: text,
    appendTo: $list
  });
  
  $text.val(""); // And empty the textarea!
};


$add.on("click", createLi);

<textarea id="text" placeholder="Write something…"></textarea>
<br>
<button id="add" type="button">ADD</button>
<ul id="list"></ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>