Два встроенных всплывающих окна fancybox на странице

Question

Мы пытаемся добавить два всплывающих окна fancybox на наш сайт. У нас есть один рабочий, но мы не можем заставить второго работать. Не могли бы вы посмотреть наш код?

Для HTML мы написали следующее:

<a id="popup-inline" href="#data"><div class="button">Click here</div></a><br><br> 
     <div style="display:none"> 
      <div id="data"> 
       TEXT 
      </div> 
     </div> 

<a id="popup-inline" href="#data1"><div class="button">Click here</div></a><br><br> 
     <div style="display:none"> 
      <div id="data1"> 
       TEXT1 
      </div> 
     </div>' 

Кроме того, наша JQuery является:

$(document).ready(function() { 
$("#popup-inline").fancybox({ 
     'titlePosition' : 'inside' }); 
    }); 
</script> 

Answer 1

идентификаторы уникальны, поэтому изменить его к классу для обоих элементов:

<a class="popup-inline" ... 

и do:

$(".popup-inline").fancybox({ 
    'titlePosition' : 'inside' 
}); 

jQuery (и javascript в целом) находит только первый элемент при использовании одного и того же идентификатора дважды, поскольку все остальное является недопустимой разметкой и не ожидается.

Answer 2

то, что сказал @adeneo, является правильным. Кроме того, вы не должны поместить скрытый DIV вокруг элементов, которые содержат содержание рядного FancyBox:

<div id="data1" style="display:none"> 

    TEXT1 

</div>