Ruby remote partial being rendered twice - ruby-on-rails

Question

I've spent this afternoon moving code around, trying different things, etc but am unable to solve my (probably simple) problem. I have a button on my index layout that displays a partial form in a modal dialogue to a) create new entries or b) edit existing ones. I'm using the materialize, simple form and client side validation gems.
When I click the button for a new entry the modal appears twice, which looks a bit rubbish but more importantly when I try to save an entry two POST requests are made.
Obviously, I just want the form partial to be rendered once... but I can't work out why its happening twice.
Thanks all for your help, let me know if you need any more than what I have provided below.
This is the button code in the index.html.erb layout
<div class="fixed-action-btn">
<%= link_to "<i class='material-icons'>add</i>".html_safe,
new_patient_path, :remote => true, :id => 'new_patient_link',
:class => "btn-floating btn-large red" %>
</div>
Which then loads the javascript in new.js.erb
$('#modal_partial').html('<%= escape_javascript(render('form')) %>');
That subsequently renders the _form.html.erb partial into the following div (which is stored in a shared/_footer.html.erb partial and sits at the bottom of the index page.
<div id="form_modal_wrap">
<div id="modal_partial" class="modal modal-fixed-footer">
</div>
</div>
And the _form.html.erb partial:
<div id="edit_patient_modal" class="";>
<%= simple_form_for #patient, validate: true, remote: true do |f| %>
<div class="modal-content" style="padding: 0px;">
<h4 class="col s12" style="margin: 0px; padding: 10px 25px;">New Patient</h4>
<%= f.error_notification %>
<div class="row">
<div class="col s12" style="padding: 0px;">
<ul class="tabs" style="padding: 0px;">
<li class="tab col"><a class="active" href="#demographics">Demographics</a></li>
<li class="tab col"><a class="active" href="#admission">Admission</a></li>
<li class="tab col">Presentation</li>
<li class="tab col">Jobs</li>
<li class="tab col">Results</li>
</ul>
</div>
<div id="demographics" class="col s12" style="padding: 20px;">
<%= f.input :nhs, :label => "NHS" %>
<%= f.input :fname, :label => "Firstname" %>
<%= f.input :lname, :label => "Lastname", validate: { presence: true, uniqueness: false } %>
<%= f.input :dob, :label => "DOB", as: :date, start_year: Date.today.year - 110,
end_year: Date.today.year - 12,
order: [:day, :month, :year] %>
<%= f.input :mrn, :label => "MRN" %>
</div>
<div id="admission" class="col s12" style="padding:20px;" >
<%= f.association :location %>
<%= f.input :bed, :label => "Bed" %>
<%= f.association :team, input_html: { multiple: true } %>
</div>
<div id="presentation" class="col s12" style="padding:20px;">
<%= f.input :dx, :label => "Dx" %>
<%= f.input :pmh, :label => "PMH" %>
</div>
<div id="jobs" class="col s12" style="padding:20px">
<p>This job list is shared between all teams.</p>
<%= f.input :jobs, :label => "Jobs" %>
</div>
<div id="results" class="col s12" style="padding:20px;">
<table>
<tr>
<th>Group</th>
<th>Result</th>
<th>Date</th>
</tr>
<% #patient.results.each do |result| %>
<tr>
<td>
<%= Investigation.find(result.investigation_id).group %>
</td>
<td>
<%= Investigation.find(result.investigation_id).short %>
<%= result.value %>
</td>
<td>
<%= result.date %>
</td>
</tr>
<% end %>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<a id="modal_close" href="#!" class="modal-close waves-effect waves-pink btn-flat">Cancel</a>
<%= f.button :submit, :class => "waves-effect btn" %>
</div>
<% end -%>
The following javascript is in the bottom of the _form.html.erb partial:
$(document).ready(function(){
$('#modal_partial .tabs').tabs();
$('#modal_partial select').formSelect();
$('#modal_partial').modal();
$('#modal_partial').modal('open');
$('form').enableClientSideValidations();
});
$("#modal_close").on("click", function(e) {
e.preventDefault();
$('#modal_partial').modal('close');
});
</script>

Answer 1

So I worked out what I'd done in the end...
in application.js I had added both of the following:
//= require jquery_ujs
//= require rails-ujs
By removing either one of these the modals only appeared once. After reading the documentation I only need rails-ujs as it performs the same functions as jquery_ujs, but without having a dependency upon jquery. It does not mean that you can't still have jquery as an independent requirement (as I still do).
So the solution was to delete the line //= require jquery-ujs and just have the following:
//= require rails-ujs
Thanks lacostenycoder for you help

Answer 2

The only way to debug this is to check EVERY part of your code which loads javascript including your layouts. Something is causing the form to duplicate, but it's impossible to debug without seeing all of the code.