ruby on rails rending two forms inside a page - ruby-on-rails

Question

I have two modals on one page. When clicked on button Add Providers one modal should pop up for that. When I clicked on Add Hospital another modal should pop up. However, no matter which button I clicked on only the modal for 'Providers' showed up? No idea why.
Modal 1 is happening from the render partial provider_access_modal and the second is supposeed to happen at rendering the partial sites_access_modal
<%= render :partial => 'provider_access_modal' %> ##Modal 1
<%= render :partial => 'shared/side_menu' %>
<div id="profiles" class="container-main">
<%= render :partial => 'patients/top_bar' %>
<div class="top-space"></div>
<div class="flash">
<%- flash.each do |name, msg| -%>
<%= content_tag :div, msg, :class => "flash_#{name}" if msg.is_a?(String) %>
<%- end -%>
</div>
<div class="content-container your-sites">
<div class="header">
<div class="icon-circle"><div class="icon"><%= image_tag "my-providers-2x.png" %></div></div>
<div class="title">Your Providers</div>
<div class="button-wrapper">
<%= button_tag "Add Provider", class:"add-button", id: 'add-provider-modal' %>
<div class="push"></div>
</div><!--button-wrapper-->
</div><!--header-->
<div class="body">
<div class="no-records">
<%= image_tag "icon-no-records", class: "image" %>
<div class="text">You have no providers.</div>
</div>
</div>
</div>
<%= render :partial => 'sites_access_modal' %> ##Modal 2
<div class="content-container your-sites">
<div class="header">
<div class="icon-circle"><div class="icon"><%= image_tag "hospitalizations-icon-2x.png" %></div></div>
<div class="title">Your Hospitals</div>
<div class="button-wrapper">
<%= button_tag "Add Hospital", class:"add-button", id: 'add-site-modal' %>
<div class="push"></div>
</div><!--button-wrapper-->
</div><!--header-->
<div class="body">
<% if #active_memberships.count > 0 %>
<table>
<thead>
<tr>
<th>Hospital Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% #active_memberships.each do |membership| %>
<tr>
<td><%= membership.site.name %></td>
<td>
<%= link_to patient_remove_membership_path(id: current_user.id, membership_id: membership.id), method: :put, :data => {:confirm => 'Are you sure you want to leave this site?'}, class: "btn" do %>Leave Hospital<% end %>
</td>
</tr>
<% end %>
</tbody>
</table>
<% else %>
<div class="no-records">
<%= image_tag "icon-no-records", class: "image" %>
<div class="text">You have no sites.</div>
</div>
<% end %>
</div>
</div>
</div>
Here is my provider-select.js code
function providerSearch(input) {
if (input.val()) {
var params = {
"provider_search": {
"query": input.val()
}
}
$.post("/providers/search", params, function(data, status) {
$(".auto-complete-modal-list .content").html(data)
if (data.length == 0) {
var notFound = $('<div>', {
'text': 'No provider found, please invite a provider below',
'class': 'item'
});
$(".auto-complete-modal-list .content").empty().append(notFound)
}
}, "html");
} else {
$(".auto-complete-modal-list .content").empty()
}
}
function providerSelection(event) {
let targetProvider = null;
if ($(event.target).is('button')) {
targetProvider = $(event.target);
}
if (targetProvider != null) {
let providerEmail = targetProvider.closest('.item').data("email")
let providerName = targetProvider.closest('.item').data("name")
$('#provider-selection .item').removeAttr('style').find('button').text("Select");
targetProvider.text("Selected")
targetProvider.closest('.item').css({
"background-color": "rgb(86, 116, 204, .8)"
})
$("#invite-label").fadeOut(function() {
$(this).text(`You are inviting ${providerName} to sign this document`).fadeIn(100);
});
$('#invite_email').val(providerEmail)
}
}
$(document).on('turbolinks:load', function() {
$("#provider-select .input-search").on("keyup", function(e) {
providerSearch($(this));
});
$("#provider-selection").on("click", function(e) {
providerSelection(e);
});
$('#invite_email').blur(function() {
let cantFindText = "Can't find your provider? Invite them via email below"
if (!$.trim(this.value).length) {
if ($('label').text() != cantFindText) {
$("#invite-label").fadeOut(function() {
$(this).text(cantFindText).fadeIn(40);
});
}
}
});
// for add provider access
$('#add-provider-modal').click(function(){
$('#modal').show()
})
});
And then here is my site-select.js code
function siteSearch(input) {
if (input.val()) {
var params = {
"sites_search": {
"query": input.val()
}
}
$.post("/sites/search", params, function(data, status) {
$(".auto-complete-modal-list .content").html(data)
if (data.length == 0) {
var notFound = $('<div>', {
'text': 'No sites found',
'class': 'item'
});
$(".auto-complete-modal-list .content").empty().append(notFound)
}
}, "html");
} else {
$(".auto-complete-modal-list .content").empty()
}
}
function siteSelection(event) {
let targetSite = null;
if ($(event.target).is('button')) {
targetSite = $(event.target);
}
if (targetSite != null) {
let siteId = targetSite.closest('.item').data("id")
$('#site-selection .item').removeAttr('style').find('button').text("Add");
targetSite.text("Added")
targetSite.closest('.item').css({
"background-color": "rgb(86, 116, 204, .8)"
})
}
}
$(document).on('turbolinks:load', function() {
$("#site-select .input-search").on("keyup", function(e) {
siteSearch($(this));
});
$("#site-selection").on("click", function(e) {
siteSelection(e);
});
$('#add-site-modal').click(function(){
$('#modal').show()
})
});

Answer 1

In both of your JavaScript snippets I can see the line
$('#modal').show();
There is:
$('#add-provider-modal').click(function(){
$('#modal').show()
})
and
$('#add-site-modal').click(function(){
$('#modal').show()
})
So when you click your Add Provider Modal or Add Site Model buttons, the same model, with the id "modal", will show.
In the code you have supplied I can't find an element with the ID of "modal" so it must lie within your partials that you have not provided. I would recommend changing the partials to give them different IDs for the different modals and then updating your click handlers to open the correct one at the correct time.