title: Django - jquery popup window only gets assigned to one button (of 6)
body: <p>I am designing a cookbook website and I am stuck on this one problem.</p>
  
  <p>I am trying to combine django pagination with this smooth popup jquery plugin:</p>
  
  <p><a href="http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/" rel="nofollow noreferrer">http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/</a></p>
  
  <p>When I load the content only the first recipe button activates the popup window, which will display whatever recipe you clicked on
  This I believe is because there is only one instance of the button object and that is being assigned to the first recipe (see code snippet) in the paginated results</p>
  
  <p>how can I modify the code to allow for multiple buttons?</p>
  
  <p>here is the block content for the relevant code:</p>
  
  <p>revised template: this now works</p>
  
  <pre><code>{% block content %}
      {% autopaginate recipe_list 6 %}
          &lt;div id="recipe_cont"&gt;
          {% for recipe in recipe_list %}
          &lt;div id="recipe"&gt;
              &lt;img src="{{ STATIC_URL }}chicknbraw.jpg" alt="" height="30" width="30" style=display:"inline"; /&gt;
              &lt;div id="button{{ forloop.counter }}"&gt;&lt;input type="submit" value="View" /&gt;&lt;/div&gt;        
              &lt;h4&gt;{{ recipe.name }}&lt;/h4&gt;&lt;/a&gt;
              &lt;h5&gt;{{ recipe.author}}&lt;/h5&gt;
              &lt;h5&gt;Prep Time: {{ recipe.prep_time }} minutes&lt;/h5&gt;
              &lt;h6&gt;&lt;a href="/addrecipe/{{ recipe.id }}"&gt;Add Recipe&lt;/a&gt;
              &lt;a href="/removerecipe/{{ recipe.id }}"&gt;Remove Recipe&lt;/a&gt;&lt;/h6&gt;
              &lt;div id="popupContact{{ forloop.counter }}"&gt;
                  &lt;a id="popupContactClose{{ forloop.counter }}" style="cursor:pointer;float:right;"&gt;x&lt;/a&gt;
                  &lt;h1&gt;{{ recipe.name }}&lt;/h1&gt;
                  &lt;h3&gt;{{ recipe.author }}&lt;/h3&gt;
                  &lt;p id="contactArea"&gt;
                      Ingredients: {{ recipe.ingredients }}
                      &lt;br/&gt;&lt;br/&gt;
                      Steps: {{ recipe.steps }}
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="backgroundPopup"&gt;&lt;/div&gt;        
          &lt;/div&gt;
          {% endfor %}
          &lt;/div&gt;
          &lt;div id="col2-footer"&gt;
          {% paginate %}
          &lt;p id="recipe_order_text"&gt; order by: &lt;a href="/account/ordered/name"&gt;abc&lt;/a&gt;|&lt;a href="/account/ordered/date"&gt;date&lt;/a&gt; 
          &lt;/div&gt;
  
      {% endblock %}
  </code></pre>
  
  <p>revised jquery:</p>
  
  <pre><code>/***************************/
  //@Author: Adrian "yEnS" Mato Gondelle
  //@website: www.yensdesign.com
  //@email: yensamg@gmail.com
  //@license: Feel free to use it, but keep this credits please!                  
  /***************************/
  
  //SETTING UP OUR POPUP
  //0 means disabled; 1 means enabled;
  var popupStatus = 0;
  
  //loading popup with jQuery magic!
  function loadPopup1(){
      //loads popup only if it is disabled
      if(popupStatus==0){
          $("#backgroundPopup").css({
              "opacity": "0.7"
          });
          $("#backgroundPopup").fadeIn("slow");
          $("#popupContact1").fadeIn("slow");
  
          popupStatus = 1;
      }
  }
  function loadPopup2(){
      //loads popup only if it is disabled
      if(popupStatus==0){
          $("#backgroundPopup").css({
              "opacity": "0.7"
          });
          $("#backgroundPopup").fadeIn("slow");
          $("#popupContact2").fadeIn("slow");
  
          popupStatus = 1;
      }
  }
  function loadPopup3(){
      //loads popup only if it is disabled
      if(popupStatus==0){
          $("#backgroundPopup").css({
              "opacity": "0.7"
          });
          $("#backgroundPopup").fadeIn("slow");
          $("#popupContact3").fadeIn("slow");
  
          popupStatus = 1;
      }
  }
  function loadPopup4(){
      //loads popup only if it is disabled
      if(popupStatus==0){
          $("#backgroundPopup").css({
              "opacity": "0.7"
          });
          $("#backgroundPopup").fadeIn("slow");
          $("#popupContact4").fadeIn("slow");
  
          popupStatus = 1;
      }
  }
  function loadPopup5(){
      //loads popup only if it is disabled
      if(popupStatus==0){
          $("#backgroundPopup").css({
              "opacity": "0.7"
          });
          $("#backgroundPopup").fadeIn("slow");
          $("#popupContact5").fadeIn("slow");
  
          popupStatus = 1;
      }
  }
  function loadPopup6(){
      //loads popup only if it is disabled
      if(popupStatus==0){
          $("#backgroundPopup").css({
              "opacity": "0.7"
          });
          $("#backgroundPopup").fadeIn("slow");
          $("#popupContact6").fadeIn("slow");
  
          popupStatus = 1;
      }
  }
  //disabling popup with jQuery magic!
  function disablePopup1(){
      //disables popup only if it is enabled
      if(popupStatus==1){
          $("#backgroundPopup").fadeOut("slow");
          $("#popupContact1").fadeOut("slow");
          popupStatus = 0;
      }
  }
  function disablePopup2(){
      //disables popup only if it is enabled
      if(popupStatus==1){
          $("#backgroundPopup").fadeOut("slow");
          $("#popupContact2").fadeOut("slow");
          popupStatus = 0;
      }
  }
  function disablePopup3(){
      //disables popup only if it is enabled
      if(popupStatus==1){
          $("#backgroundPopup").fadeOut("slow");
          $("#popupContact3").fadeOut("slow");
          popupStatus = 0;
      }
  }
  function disablePopup4(){
      //disables popup only if it is enabled
      if(popupStatus==1){
          $("#backgroundPopup").fadeOut("slow");
          $("#popupContact4").fadeOut("slow");
          popupStatus = 0;
      }
  }
  function disablePopup5(){
      //disables popup only if it is enabled
      if(popupStatus==1){
          $("#backgroundPopup").fadeOut("slow");
          $("#popupContact5").fadeOut("slow");
          popupStatus = 0;
      }
  }
  function disablePopup6(){
      //disables popup only if it is enabled
      if(popupStatus==1){
          $("#backgroundPopup").fadeOut("slow");
          $("#popupContact6").fadeOut("slow");
          popupStatus = 0;
      }
  }
  //centering popup
  function centerPopup1(){
      //request data for centering
      var windowWidth = document.documentElement.clientWidth;
      var windowHeight = document.documentElement.clientHeight;
      var popupHeight = $("body").height();
      var popupWidth = $("body").width();
      //centering
      $("#popupContact1").css({
          "position": "absolute",
          "top": windowHeight/2-popupHeight/2,
          "left": windowWidth/2-popupWidth/2
      });
      //only need force for IE6
  
      $("#backgroundPopup").css({
          "height": windowHeight
      });
  
  }
  function centerPopup2(){
      //request data for centering
      var windowWidth = document.documentElement.clientWidth;
      var windowHeight = document.documentElement.clientHeight;
      var popupHeight = $("body").height();
      var popupWidth = $("body").width();
      //centering
      $("#popupContact2").css({
          "position": "absolute",
          "top": windowHeight/2-popupHeight/2,
          "left": windowWidth/2-popupWidth/2
      });
      //only need force for IE6
  
      $("#backgroundPopup").css({
          "height": windowHeight
      });
  
  }
  function centerPopup3(){
      //request data for centering
      var windowWidth = document.documentElement.clientWidth;
      var windowHeight = document.documentElement.clientHeight;
      var popupHeight = $("body").height();
      var popupWidth = $("body").width();
      //centering
      $("#popupContact3").css({
          "position": "absolute",
          "top": windowHeight/2-popupHeight/2,
          "left": windowWidth/2-popupWidth/2
      });
      //only need force for IE6
  
      $("#backgroundPopup").css({
          "height": windowHeight
      });
  
  }
  function centerPopup4(){
      //request data for centering
      var windowWidth = document.documentElement.clientWidth;
      var windowHeight = document.documentElement.clientHeight;
      var popupHeight = $("body").height();
      var popupWidth = $("body").width();
      //centering
      $("#popupContact4").css({
          "position": "absolute",
          "top": windowHeight/2-popupHeight/2,
          "left": windowWidth/2-popupWidth/2
      });
      //only need force for IE6
  
      $("#backgroundPopup").css({
          "height": windowHeight
      });
  
  }
  function centerPopup5(){
      //request data for centering
      var windowWidth = document.documentElement.clientWidth;
      var windowHeight = document.documentElement.clientHeight;
      var popupHeight = $("body").height();
      var popupWidth = $("body").width();
      //centering
      $("#popupContact5").css({
          "position": "absolute",
          "top": windowHeight/2-popupHeight/2,
          "left": windowWidth/2-popupWidth/2
      });
      //only need force for IE6
  
      $("#backgroundPopup").css({
          "height": windowHeight
      });
  
  }
  function centerPopup6(){
      //request data for centering
      var windowWidth = document.documentElement.clientWidth;
      var windowHeight = document.documentElement.clientHeight;
      var popupHeight = $("body").height();
      var popupWidth = $("body").width();
      //centering
      $("#popupContact6").css({
          "position": "absolute",
          "top": windowHeight/2-popupHeight/2,
          "left": windowWidth/2-popupWidth/2
      });
      //only need force for IE6
  
      $("#backgroundPopup").css({
          "height": windowHeight
      });
  
  }
  //CONTROLLING EVENTS IN jQuery
  $(document).ready(function(){   
      //LOADING POPUP
      //Click the button event!
      $("#button1").click(function(){
          //centering with css
          centerPopup1();
          //load popup
          loadPopup1();
      });
      $("#button2").click(function(){
          //centering with css
          centerPopup2();
          //load popup
          loadPopup2();
      });
      $("#button3").click(function(){
          //centering with css
          centerPopup3();
          //load popup
          loadPopup3();
      });
      $("#button4").click(function(){
          //centering with css
          centerPopup4();
          //load popup
          loadPopup4();
      }); 
      $("#button5").click(function(){
          //centering with css
          centerPopup5();
          //load popup
          loadPopup5();
      });
      $("#button6").click(function(){
          //centering with css
          centerPopup6();
          //load popup
          loadPopup6();
      });                 
      //CLOSING POPUP
      //Click the x event!
      $("#popupContactClose1").click(function(){
      disablePopup1();
  });
      $("#popupContactClose2").click(function(){
      disablePopup2();
  });
      $("#popupContactClose3").click(function(){
      disablePopup3();
  });
      $("#popupContactClose4").click(function(){
      disablePopup4();
  });
      $("#popupContactClose5").click(function(){
      disablePopup5();
  });
      $("#popupContactClose6").click(function(){
      disablePopup6();
  });
      //Click out event!
      $("#backgroundPopup").click(function(){
          disablePopup();
      });
      //Press Escape event!
          $(document).keypress(function(e){
          if(e.keyCode==27 &amp;&amp; popupStatus==1){
              disablePopup1();
          }
      });
          $(document).keypress(function(e){
          if(e.keyCode==27 &amp;&amp; popupStatus==1){
              disablePopup2();
          }
      });
          $(document).keypress(function(e){
          if(e.keyCode==27 &amp;&amp; popupStatus==1){
              disablePopup3();
          }
      });
          $(document).keypress(function(e){
          if(e.keyCode==27 &amp;&amp; popupStatus==1){
              disablePopup4();
          }
      });
          $(document).keypress(function(e){
          if(e.keyCode==27 &amp;&amp; popupStatus==1){
              disablePopup5();
          }
      });
          $(document).keypress(function(e){
          if(e.keyCode==27 &amp;&amp; popupStatus==1){
              disablePopup1();
          }
      });
  });
  </code></pre>
  
  <p>tldr: I believe I need to create a new button for each recipe in the list. I just don't know how using djangos tag language to allow this while keeping the css and html separate from the django site. Since I pageinate 6 objects per page I thought I could somehow name each of the 6 buttons to correspond to whatever recipe is occupying that spot</p>