title: Why do I have the same summernote div appear for all the lis in my list?
body: <p>I have multiple lis in an unordered list which when clicked gives me a summernote div. The problem is that all these lis have the same summernote div meaning when I click on a li and change the text in the summernote div the text changes for all the divs.</p>
  
  <p>My list:</p>
  
  <pre><code>&lt;ul id = "courseNav"&gt;              
           &lt;li class = "topics" style = "margin-top: -12px"&gt;&lt;a href="#"&gt;Topic&lt;/a&gt;&lt;/li&gt;
           &lt;li class = "topics"&gt;&lt;a href="#"&gt;Topic&lt;/a&gt;&lt;/li&gt;
           &lt;li class = "topics"&gt;&lt;a href="#"&gt;Topic&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My summernote code:</p>
  
  <pre><code>&lt;div id = "editor"&gt;Type something...&lt;/div&gt;
  
  $('#editor').summernote();
  </code></pre>
  
  <p>Every li I click in my list will have the same summernote div will appear. How can I fix this?</p>
  
  <p>My button code;
  <code>$("#add").click(function() {
     $("#courseNav").append("&lt;li&gt;&lt;a href = "#"&gt;added&lt;/a&gt;&lt;/li&gt;");
  });</code></p>