Materialize Modal and Dropdown Problems with Meteor Blaze - meteor

Question

I recently ran into some problems when trying to use the Materialize modal and dropdown features with Blaze, specifically when there are multiple instances of each.
I have this template called cadcall:
<template name="cadcall">
<tr>
<td class="truncate">{{id}}</td>
<td>FRI</td>
<td>{{time}}</td>
<td>{{type}}</td>
<td>{{location}}</td>
<td>{{notes}}</td>
<td>
<i class="material-icons call-dropdown-button" data-activates="cadcallactions">more_vert</i>
</td>
</tr>
<div id="call-details-modal" class="modal">
<div class="modal-content">
<h4>Call Details</h4>
<div class="row">
<form class="new-call col s12">
<div class="row">
<div class="input-field col s6">
<input id="call-id" type="text" class="validate" disabled>
<label for="call-id">ID</label>
</div>
<div class="input-field col s6">
<input id="call-time" type="text" class="validate" disabled>
<label for="call-time">Time</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="call-location" type="text" autocomplete="off">
<label for="call-location">Location</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="call-notes" class="materialize-textarea" length="100000" autocomplete="off"></textarea>
<label for="call-notes">Notes</label>
</div>
</div>
<div class="modal-footer">
<button type="submit" href="#!" class="modal-action modal-close waves-effect waves-grey btn-flat center">Submit</button>
</div>
</form>
</div>
</div>
</div>
<ul id='cadcallactions' class='dropdown-content'>
<li><a class="callupdate" href=""><i class="material-icons">update</i>Update</a></li>
<li><a class="callresolve" href=""><i class="material-icons">check</i>Resolve</a></li>
</ul>
</template>
Here is the cadcall events:
Template.cadcall.events({
'click .callresolve'(e) {
Calls.remove(this._id);
},
});
Here is the cadcall onRendered:
Template.cadcall.onRendered(function() {
$(document).ready(function () {
$('.call-details').leanModal();
});
$('.call-dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: false, // Does not change width of dropdown to that of the activator
hover: false, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: true, // Displays dropdown below the button
alignment: 'right', // Displays dropdown with edge aligned to the left of button
stopPropagation: false // Stops event propagation
});
});
Essentially, for each call there is in the Mongo database, I iterate each call entry. However, if there are multiple calls, the modal doesn't function correctly. If I try to close the modal (by clicking the class callupdate after opening it, the gray area behind it stays.
In addition to the modal not working correctly, the dropdown menu also acts funky, specifically when I try to delete a field (by clicking the class callresolve). Whenever I try to delete a call entry it works, but thereafter the dropdown menus on the other call entries stop working altogether. Furthermore, for some reason when I add an entry then delete it, an error pops up in the Chrome console:
blaze.js:650 Uncaught Error: Must be attached
at Blaze._DOMRange.DOMRange.containsElement (blaze.js:650)
at Blaze._DOMRange.<anonymous> (blaze.js:2612)
at HTMLAnchorElement.<anonymous> (blaze.js:863)
at HTMLTableSectionElement.dispatch (jquery.js:4723)
at HTMLTableSectionElement.elemData.handle (jquery.js:4391)
Presumably, since these problems only occur when I have multiple call entries, I think the HTML may be conflicting with each iteration of the call entry. Is there a way to remedy this issue?