Javascript only works on first Contact 7 Form on page

Question

I have two contact 7 forms on my page (section 3 and 10), only the top one will follow the javascript function. If I add another form to the top of the page, the new top one works and the other one stops working. It doesn't seem to matter if I make a new function for each form or not. Page is http://www.sportshosts.com/new-home/

If it works, the pop up on the following page will have registered your details - it currently only does it for the first. Don't forget to clear in Javascript console before testing next one with localStorage.clear();

I have this in the additional settings of the top form:on_sent_ok: "js_viralloopsinfo();" and this in the second: on_sent_ok: "js_bottomviralloopform();"

This is the javascript

function js_viralloopsinfo() {
  VL.extraData = {}
  VL.options.form_fields.form_firstName = jQuery("#firstname").val();
  VL.options.form_fields.form_email = jQuery("#email").val(); 
  VL.createLead(function() {
    //any logic to run after the participation
  });
} 
function js_bottomviralloopform() {
  VL.extraData = {}
  VL.options.form_fields.form_firstName = jQuery("#firstname").val();
  VL.options.form_fields.form_email = jQuery("#email").val(); 
  VL.createLead(function() {
    //any logic to run after the participation
  });
} 

Even if I add a form that works on another page to the top, the new top one will work and the previous top one no longer works.