javascript - how to individual box minimize after append function creation -

i have chat boxes.after box creation.how minimize individual boxes

$(document).ready(function(){      $("a").click(function(){       var name = $(this).html();      var user ='<div id="mainchat"><button id="min"> min</button><br>'+name+'</div>';     $("#demo1").append(user);     return false;      });  });  // minimize individual box  $(document).on('click', '#min',  function(){    $(this).find("#mainchat").toggle(700);// not working.      //$("#mainchat").toggle(700) applied code,first box minimized.    });

#mainchat  {    position :relative;      float:left;    top:10px;    left:50px;    margin right:10px;    height:250px;    width:100px;    border:1px solid red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <a href="#">first</a><br>  <a href="#">second</a><br>  <a href="#">third</a>    <p id ="demo1"></p>

please minimize individual boxes.when click on individual minimize buttons.thanks in advance

just edit this, because find works point child element:

see here: https://jsfiddle.net/r84dw7t3/

// minimize individual box $(document).on('click', '#min',  function(){   $(this).parent("#mainchat").toggle(700); });