title: passing value to one div from another via jquery
body: <p>i am trying to pass a value form one div to another. the first div is generated by a for each loop and has a conditional statement that if the condition matches, the value is passed to second div and the second div is shown via a jquery popup window.
  here is my code:</p>
  
  <pre><code>&lt;?php foreach ($value as $data) {
  ?&gt;
  &lt;div class="center"&gt;
      &lt;h4&gt;Description:&lt;/h4&gt;
      &lt;?php 
          if(strlen($data['description'])&lt;50)
          {
              echo $data['description'];
          }
          else
          {
              $str=$data['description'];
              $substr=substr($str,0,50);
              echo $substr.'&lt;p class=button&gt;&lt;a href=#&gt;read more...&lt;a/&gt;&lt;p/&gt;';
      ?&gt;
      &lt;?php }?&gt;
  &lt;/div&gt;
  &lt;?php }?&gt;
  &lt;div class="popupContact"&gt;
      &lt;a class="popupContactClose"&gt;x&lt;/a&gt;
      &lt;h1&gt;Description&lt;/h1&gt;
      &lt;p class="contactArea"&gt;
          &lt;?php echo $str;?&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="backgroundPopup"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>here is my jquery popup</p>
  
  <pre><code>//SETTING UP OUR POPUP
  //0 means disabled; 1 means enabled;
  var popupStatus = 0;
  
  //loading popup with jQuery magic!
  function loadPopup(){
      //loads popup only if it is disabled
      if(popupStatus==0){
          $(".backgroundPopup").css({
              "opacity": "0.7"
          });
          $(".backgroundPopup").fadeIn("slow");
          $(".popupContact").fadeIn("slow");
          popupStatus = 1;
      }
  }
  
  //disabling popup with jQuery magic!
  function disablePopup(){
      //disables popup only if it is enabled
      if(popupStatus==1){
          $(".backgroundPopup").fadeOut("slow");
          $(".popupContact").fadeOut("slow");
          popupStatus = 0;
      }
  }
  
  //centering popup
  function centerPopup(){
      //request data for centering
      var windowWidth = document.documentElement.clientWidth;
      var windowHeight = document.documentElement.clientHeight;
      var popupHeight = $(".popupContact").height();
      var popupWidth = $(".popupContact").width();
      //centering
      $(".popupContact").css({
          "position": "absolute",
          "top": windowHeight/2-popupHeight/3.25,
          "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!
      $(".button").click(function(){
          //centering with css
          centerPopup();
          //load popup
          loadPopup();
      });
  
      //CLOSING POPUP
      //Click the x event!
      $(".popupContactClose").click(function(){
          disablePopup();
      });
      //Click out event!
      $(".backgroundPopup").click(function(){
          disablePopup();
      });
      //Press Escape event!
      $(document).keypress(function(e){
          if(e.keyCode==27 &amp;&amp; popupStatus==1){
              disablePopup();
          }
      });
  
  });
  </code></pre>
  
  <p>now, as the first div is generated from a for each loop, i need to distinguish the <strong><code>read more..</code></strong> link to determine which one of the read more is clicked and pass the appropriate <strong><code>$str</code></strong> to the second div. is it possible to pass the value via jquery? or is there any better way of doing it?
  it may sound confusing as i am weak with my words, but if someone do understand what i am saying please help.</p>