javascript - Multiple popups appearing in prod (on Heroku) but not locally -

i had issue once before (button click causes multiple stripe modals pop up) reason because had 2 callbacks both triggering same event (open stripe checkout modal).

however, here issue different. have 1 callback triggering (the clicking of button), , locally, behaves expected, , 1 modal pops up. however, on heroku, 2 popups appear 1 on other. cleared assets , rebuilt scratch issue persists.

here code of page:    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>  <div class="panel panel-default"> <div class="panel panel-header">   <h1 style="text-align: center"> <%= current_user(@conn).name %> </h1> </div>  <div class="panel panel-content"> <%= if current_user(@conn) %>  <%= if current_user(@conn).instagram_token == nil %> <button onclick="location.href='<%= @url %>&current_user=<%= current_user(@conn).id %>'" type="button" class="btn btn-primary btn-md"> login instagram  </button> </br> </br> <% end %>    <p> <%= current_user(@conn).home %> </p>    <%= if current_user(@conn).instagram_token != nil %>    <button onclick="location.href='/instagram'" type="button" class="btn btn-primary btn-md">     instagram feed   </button>    <% end %> <%= if current_user(@conn).customer_id %> <p> stripe customer_id: <span class="keys"><%= current_user(@conn).customer_id %></span> </p> <p> stripe account_id: <span class="keys"><%= current_user(@conn).connect_id %></span> </p> <p> stripe pub_key: <span class="keys"><%= current_user(@conn).publishable_key %></span> </p> <p> stripe secret_key: <span class="keys"><%= current_user(@conn).secret_key %></span> </p> <% else %>             <button id="addcard"                      onclick="addcardfunction()"                     title="add payment information"                      data-name="<%= current_user(@conn).name %>"                      data-email="<%= current_user(@conn).email %>"                      class="btn btn-primary">                   add card             </button>  <% end %>  <style>   .keys {     font-size: large;     color: blue;   }   </style>  <button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#profile_picture_modal">   add profile picture </button>   <button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#modal1">   add bank account </button>  <script>  </script> <!-- have option instagram or file upload-->    <% end %>   </div>  </div>   function addstripeinformation(data) {   console.log("hey");   var handler = stripecheckout.configure({     key: 'pk_test_k90dphcgkmfyhya5anvrrvky',     // key: 'pk_live_q43jyi6k0eatjdmdkvyivyqy',     token: function(token) {       $.ajax({         url: '/users/customer',         type: "post",         beforesend: function(xhr) {           xhr.setrequestheader('x-csrf-token', '<%= get_csrf_token() %>')         },         data: {           "token" : token.id,           "email" : data.email         },         success: function(data, e) {           console.log(data);         }       });     }   });     $(function(){     // open checkout further options     handler.open({       email: data.email,       name: data.name,       description: 'you\'ll eating before know it',       zipcode: false,       panellabel: "add information",       allowrememberme: false     });   });    // close checkout on page navigation   $(window).on('popstate', function() {     handler.close();   }); }   function addcardfunction() {     var name = $('#addcard').attr('data-name');     var email = $('#addcard').attr('data-email');     addstripeinformation({'name' : name, 'email' : email});     return false; }  </script> 

the problem was using multiple jquerys, removing them , using bower/npm solved problem