Summernote显示在所有位置（Laravel 5.2）

Question

I am working on laravel 5.2 .When i click on "Edit Group Name", summernote text editor is displayed below each groupname as shown below:

I want that the summernote text editor is displayed only for the particular group name.

My view:

    @foreach($groups as $group)

   <div  id="zx" class="panel-content">
   <div class="row">
   <section  class=" col-md-offset-1 col-md-2 col-xs-offset-1 col-xs-3">
   <img id="imagecircle" style="width:40px;height:40px; 
   margin-top:5px;background-color:silver;" 
   class="img-circle" src="images/g.jpg"/>
   </section>
   <section class="col-md-offset-1 col-md-6 col-xs-8">
   <a id="hash" href="" style="font-size:20px;
   text-decoration:none;">{{$group->name}}</a>
   <textarea  style="display:none;" name="textfield4" 
   id="textfield4">  </textarea>
   <div class="groupname" id="a"></div>
   </section>


    <section class="col-md-1 dropdown">
    <button type="button" style="margin-top:5px;"
    class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
    <span id="removesign" class="glyphicon glyphicon-chevron-down">
    </span></button>

    <ul class="dropdown-menu" role="menu">
    <li role="presentation"><a style="font-weight:bold; 
     color:black;" onclick="edit()" role="menuitem" tabindex="-1">
     Edit Group Name</a></li>
    <li role="presentation"><a style="font-weight:bold; 
    color:black;"role="menuitem" tabindex="-1"
     href="{{   URL('/groups/'.$group->id) }}">
      Leave This Group</a></li>

          </ul>
          </section>
           </div>
          </div>
       @endforeach

My js code:

    var edit = function() {
    $('.groupname').summernote({focus: true});
    };

Answer 1

You can add an id to the element summernote

<div class="groupname" id="groupname_{{$group->id}}"></div>

And send the id as an argument to the function onclick event

<li role="presentation"><a style="font-weight:bold;
 color:black;" onclick="edit({{$group->id}})" role="menuitem" tabindex="-1">

And only initialize the note with the selected id

var edit = function(id) {
    $('#groupname_' + id).summernote({focus: true});
};