Текст не может добавить к после ввода. Кроме того, не могу добавить новый текст

Question

Я новичок в javascript и jquery. Изучая это, я столкнулся с несколькими проблемами. Я хотел знать, что я делаю не так здесь. Я использую элемент textarea для ввода. Когда я запускаю скрипт jQuery, приведенный ниже, он отправляет сообщение о погружении, которое я назвал read-post, без проблем, но я не могу запустить функцию щелчка, чтобы добавить текстовую область. Кроме того, если я начну печатать в текстовой области, я не смогу добавить текстовую область. Однако, если я начну frest, я не смогу добавить текстовую область.

$(".btn-post").click(function() {
  $("div").append($("textarea").val() + '<br />');
  $("textarea").val('');
  $("textarea").html('');
});

$("div #icon > span").click(function() {
  $(".textarea").append($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row post-body">
  <div class="col-2 p-0 post-img-holder my-auto p-1">
    <div class="embed-responsive embed-responsive-1by1 text-center">
      <div class="embed-responsive-item">
        <a href="uuid">
          <img class="post-img" src="$imgPath">
        </a>
      </div>
    </div>
  </div>
  <div class="col-10 p-0">
    <textarea class="post-input" type="textblock" placeholder="What do you want to share, uuid?"></textarea>
  </div>
</div>
<div class="row post-footer">
  <div class="col-10 float-left dropdown">
    <a class="dropdown-toggle emoji-icon" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">?</a>
    <div id="emoji-icon" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <span>&#x1F600;</span><span>&#x1F603;</span><span>&#x1F604;</span><span>&#x1F601;</span><span>&#x1F606;</span>
      <span>&#x1F605;</span><span>&#x1F923;</span><span>&#x1F602;</span><span>&#x1F642;</span><span>&#x1F643;</span>
    </div>
  </div>
  <div class="col-2 float-right">
    <button class="btn btn-secondary btn-sm btn-post" type="post">Post</button>
  </div>

Answer 1

https://jsfiddle.net/hmwLox17/ у вас нет двух пропущенных, один из них - ваш значок id # emoji-icon, но вы написали только #icon, второе пропущено - вы должны написать $ ("textarea"), но вы написали $ (". textarea")

$ (". textarea") означает, что у вас есть элемент с классом textarea

# icon означает, что у вас есть элемент с идентификатором icon

 $("div #emoji-icon > span").click(function(){
       $("textarea").val($("textarea").val()+$(this).text());
   });