title: each <p> is added in all .content divs and not only in one
body: <p>I have two divs .content.</p>
  
  <p>And I have a button "add" to add paragraphs to .content divs.</p>
  
  <p>I want to have a maximum of 3 paragraphs in each .content div, when this two .content divs already have 3 paragraphs I want to create a new .content div and add there the new paragraph.</p>
  
  <p>But its not working properly, when I add a new paragraph to .content div, the paragraph is added in all .content divs, and I just want to add a paragraph in one div to in all.</p>
  
  <p>Do you see how to do this correctly?</p>
  
  <pre><code>$(document).on('click', '#input', function () {
      $('#input').val('');
  });
  
  
  $(document).on('click', '#add', function () {
      var input = $("#input").val();
      alert(input);
      var divContentSize = $(".container &gt; *").length;
      alert(divContentSize);
      var relDiv = $(".container &gt; div").filter(function () {
          return $(this).children().length !== 3;
      });
  
      if (relDiv.length) {
          relDiv.prepend("&lt;p&gt;" + input + "&lt;/p&gt;");
      }
      else {
          $(".container").append("&lt;div class=content&gt;&lt;p&gt;" + input + "&lt;/p&gt;&lt;/div&gt;");
      }
  
  }); 
  
  
  $(".prev").click(function(){
      if ($(".container .content:visible").next().length != 0)
          $(".container .content:visible").fadeOut(function(){
              $(this).next().fadeIn();
          });
      else {
          $(".container .content:visible").fadeOut(function(){
              $(".container .content:first").fadeIn();
          });
      }
      return false;
  });
  
  $(".next").click(function(){
      if ($(".container .content:visible").prev().length != 0) { 
          $(".container .content:visible").fadeOut(function(){
              $(this).prev().fadeIn();
          });}
      else {
          $(".container .content:visible").fadeOut(function(){
              $(".container .content:last").fadeIn();
          });
      }
      return false;
  });
  </code></pre>