summernote rendered in Iron:Router

I use Iron:Router and summernote but it seem not to work properly with each other. Start with:

<div id="summernote"></div>

is rendered by

Template.newPost.rendered = function(){
$('#summernote').summernote({height: 500});
}

Routers are defined

Router.route('/home', {name: 'home'});
Router.route('/new-post', {name: 'newPost'})

when I switch between 2 templates, this happen: https://i.sstatic.net/sLbCH.png

rendered-summernote keep duplicating between 2 templates How can this problem be solved? My Git repo GitHub

Thank you :)

Solution

Template.newPost.rendered = function(){
    $('#summernote').summernote({height: 500});

}

Template.newPost.events({
   'click #submit': function (event) {
     event.preventDefault();
     //var title = $('#titleInput').val()
     var content = $('#summernote').code()
     console.log(title);
     var post = {
     //title: title,
     content: content
     };
     console.log(post);
     return false;
   }
 });


Template.newPost.onDestroyed(function() {
    $('#summernote').destroy();
});

That's the new-post.js file, it works. What's happening is that on summernote init, the editor replaces the div with id summernote, so it's not really in this template anymore.