如何在追加函数创建后最小化单个框

Question

我有一些聊天框。在创建框之后。尽量减少单个框

$(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>

请尽量减少个别盒子。点击个别最小化按钮。提前谢谢

Answer 1

只需编辑它，因为find只能指向子元素：

见这里：https://jsfiddle.net/r84dw7t3/

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