Semantic-ui modal duplicating

Question

I have a Semantic-ui modal on a route that initially works as expected (first time the app is loaded). I can open and close multiple times without issue. If I navigate away from the route and back again and then click the modal button again (which fires the event below) the modal html is duplicated. Each time I do this (navigate away and back), another modal is added.

My modal is broken into two templates, which as I read, is the way it should be.

html:

<template name="contentList">
  {{> addContent}}
  <button class="ui blue button" href="#" id="modal">
    Add Content
  </button>
</template>

<template name="addContent">
  <div id="modal" class="ui small addContent modal">
    {{>addContentForm}}
  </div>
</template>

<template name="addContentForm">
  <!-- Form HTML goes here -->
</template>

js:

Template.contentList.events({
  'click #modal': function(e, t) {
    event.preventDefault();
    $('.ui.modal')
    .modal({
      onApprove : function() {
        $('.ui.modal').modal('hide');
      }
    })
    .modal('show');
  }
});

What do I need to do to stop this behaviour?

Answer 1

Well don't I feel like a fool...

The reason the modal div was duplicating was because the {{>addContent}} modal was placed within a div. Moving that code out of a div fixed the issue. My fault for simplifying the code in my question too much!