jquery - 2 fancybox links to different boxes - conflict -

i have 2 links link fancyboxes on ruby on rails:

link 1's classes : "why_am_i_here fancybox" link 2's classes : "feedback_link fancybox"

when click on link 1 first time, takes me link 2's fancybox. if click again, takes me correct link. other button (link 2) works normally.

rather invade sorts of code may/may not relevant, tell me further info need , i'll provide.

here rendered html forr why_am_i_here (link 1):

$(function(){     var search_value;     $(".why_am_i_here_button, .fancybox").fancybox({         type : 'iframe',         autosize : true,         afterload : function(){                 $(".fancybox-iframe").contents().find(".feedback_link").remove();                 $(".fancybox-iframe").contents().find("#app_header_right").remove();                 $(".fancybox-iframe").contents().find("#feed").remove();             $(".fancybox-iframe").contents().find("#search_submit").unbind("type");              block_off_default_clicks();             set_click_listeners();             $(".fancybox-iframe").contents().find("#search_submit").click(function(e){                 e.preventdefault();                 parent.$.fancybox.close();              });         },         beforeclose : function(){             search_value = $(".fancybox-iframe").contents().find('#search').val();         },         afterclose : function(){             if (search_value){                 $("#searchbox_holder").html("<%= escape_javascript(render 'restaurants/searchbox') %>");                 $("#search").attr("value", search_value);                 $("#user_edit_wrapper").hide();                 $(".search_form").submit();             }         }     }).eq(0).click().stoppropagation();  }); 

this rendered html feedback_link (link 2):

$(function(){     $(".feedback_link, .fancybox").fancybox({         type : 'iframe',         afterload : function(){             $(".fancybox-iframe").contents().find(".feedback_link").remove();             $(".fancybox-iframe").contents().find("#feed").remove();                 $(".fancybox-iframe").contents().find("#app_header_right").remove();             block_off_default_clicks();              $(".fancybox-iframe").contents().find(".feedback_form").submit(function(e){                 parent.$.fancybox.close();             });         }     }).eq(0).click().stoppropagation();  }); 

here html each link:

link 1:

<div id = "why_am_i_here_container"> <%= link_to "here\'s how works", info_path(:welcome => params[:welcome]), :remote => true, :class => "why_am_i_here_button fancybox rounded-corner", :id => "why_am_i_here" %></div> 

link 2:

<li class = "app_header_item"><%= link_to 'feedback (please)', new_feedback_path, :remote => true, :class => "feedback_link fancybox", :id => "feedback_link" %></li> 

it's difficult track doing moving code , forth :

link 1:

<div id = "why_am_i_here_container"> <%= link_to "here\'s how works", info_path(:welcome => params[:welcome]), :remote => true, :class => "why_am_i_here_button rounded-corner", :id => "why_am_i_here" %> </div> 

link 2

<li class = "app_header_item"><%= link_to 'feedback (please)', new_feedback_path, :remote => true, :class => "feedback_link", :id => "feedback_link" %></li> 

notice removed class fancybox both links.

then jquery code :

$(function () {     var search_value;     $(".why_am_i_here_button").fancybox({         // options why_am_i_here_button         type: "iframe" // etc     });     $(".feedback_link").fancybox({         // options feedback_link         type: "iframe" // etc     }); }); // ready 

both inits within same $(function(){}) ready method. code above should work.

i not sure using .eq(0).click().stoppropagation(); remove , test links.