how to individual box minimize after append function creation

Question

I have some chat boxes.after the box creation.how to minimize the 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 the individual box
$(document).on('click', '#min',  function(){
  $(this).find("#mainchat").toggle(700);// its not working.
    //$("#mainchat").toggle(700) applied this code,first box only was 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 help to minimize individual boxes.When click on individual minimize buttons.thanks in advance

Answer 1

Just edit this, because find only works to point to the child element:

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

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