fancy box pulling incorrect template

Hi your plugin has helped save a lot of time with JS but i am coming across a slight issue. Although I have two different buttons set on the page with separate contact form ID’s both buttons will pull the form which is situated first.

Here is a snippet of the code:

</div> <div class=”tp-event-info”>
<div class=”tp-info-box”>
REQUEST CALLBACK <div class=”fancybox-hidden” style=”display: none;”> <div id=”contact_form_pop”>[contact-form-7 id=”9636″ title=”Request Callback”]</div>
</div>

<div class=”tp-info-box”>
REGISTER INTEREST <div class=”fancybox-hidden” style=”display: none;”> <div id=”contact_form_pop”>[contact-form-7 id=”8480″ title=”Register Interest – Leadership”]</div>
</div>

<div class=”tp-info-box”>
<p class=”heading”>
<i class=”thim-color fa fa-clock-o”></i>Duration </p>

<p>21 Hours (3 Lessons of 7 Hours) </p>

</div>
<div class=”tp-info-box”>
<p class=”heading”>
<i class=”thim-color fa fa-flag”></i>Delivery Method </p>

<p>Lectures & Hands-On Practice</p>
</div>

<div class=”tp-info-box”>
<p class=”heading”>
<i class=”thim-color fa fa-check”></i>What’s Included </p>

<p>Trained by a Certified Educator </p>
<p>Award MQF Level 4 (NCFHE) </p>
<p>Detailed Course Notes </p>
</div>

The page I need help with: [log in to see the link]