title: Event Delegation function to add comment field
body: <p>I want to create a function with jQuery with the Event Delegation so that i can leave a comment under a blogg post.<br>
  So i need a text field under each blog post and then be able to post a comment. Any help out there?</p>
  
  <p>EDIT </p>
  
  <p>Hi, </p>
  
  <p>I just wrote a post, however I did not specify enough so I'll try to get into it a bit more :) </p>
  
  <p>I have an API <a href="https://jsonplaceholder.typicode.com/comments" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com/comments</a>
  From this API i have to retrieve data (in this case they are made up blogg comments) when I click a button on my page. 
  My code so far is:</p>
  
  <pre><code>    funtion renderBloggPosts () {
  let $bloggPosts = $("#bloggPosts");
  $bloggPosts.empty();
  for (let product of posts) {
      let $product = $(`&lt;div class="product"&gt;
          &lt;div&gt;${product.id}&lt;/div&gt;
          &lt;div&gt;${product.title}&lt;/div&gt;
          &lt;div&gt;${product.body}"&gt;&lt;/div&gt;
          &lt;div&gt;${product.Likes} Likes&lt;/div&gt;
          &lt;div&gt;&lt;button&gt;Comment&lt;/button&gt;&lt;/div&gt;
      &lt;/div&gt;`);
      $product.find("button").on("click", () =&gt; {
              // showComments(product);
          });
          $product.appendTo($bloggPosts);
      }
  }
  </code></pre>
  
  <p>The code above displays random blogg posts in the dom. Now i need to display random comments from the API above when I click the "comment" button...</p>