title: JQuery click slidetoggle only working for the first DIV of PHP repeated DIVS
body: <p>I have DIVs which are repeated for records in a database via PHP, and I have jquery script which on click should expand a div bellow out. </p>
  
  <p>This is  the simple code for the slide, generic stuff:</p>
  
  <pre><code>&lt;script src =
    "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;
  &lt;/script&gt;
  &lt;script&gt; 
    $(document).ready(function(){        // Line A   
      $("#flip").click(function(){       // Line B
        $("#panel").slideToggle("slow"); // Line C
      });
    });
  &lt;/script&gt;
  
  
  &lt;body&gt;
  
    &lt;div style="background:red" id="flip"&gt;Click to slide the panel down or up&lt;/div&gt;
  
    &lt;div style="background:green" id="panel"&gt;Oh Hello There&lt;/div&gt;
  
  
  #panel {
      display:none;
      }
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/hpvgp/3/" rel="nofollow">http://jsfiddle.net/hpvgp/3/</a></p>
  
  <p>However when I try and apply this to my code where I have the divs looped out, it only works for the first div. </p>
  
  <p>Current code:</p>
  
  <pre><code>&lt;?php
  $webserver = 'localhost'; 
  $administrator = 'root';
  $password = '';
  $db_name = 'cdb';
  $db = mysqli_connect($webserver, $administrator, $password, $db_name)
    or die('Error connecting');
  
  if( isset($_REQUEST['page'])) {
    $_SESSION['page'] = $_REQUEST['page'];
  }else{
    $_SESSION['page'] = 1;
  }
  $records_per_page = 8;
  $query = "SELECT * FROM cars";
  $result = mysqli_query($db, $query)
    or die("Error in query: '$query'");
  $row = mysqli_fetch_assoc($result);
  $i = 0;
  $start = ($_SESSION['page'] - 1) * $records_per_page;
  $end = ($_SESSION['page']) * $records_per_page;
  while($row = mysqli_fetch_assoc($result) and $i &lt; $end) {
    $i++;
    if( $i &gt; $start ) 
    {;
      echo'
      &lt;div&gt;&lt;br&gt;&lt;br&gt;
  
        &lt;div id="flip" class="navbar navbar-inverse" style ="margin-top:-40px; height:128px"&gt; 
  
            &lt;div style="float:left; height:100px; width:200px"&gt;
              &lt;img src="'.$row['logo'].'" style="margin:10px; float:left" height="100"/&gt;&lt;/div&gt; 
              &lt;div style="float:left"&gt;&lt;h2&gt;'.$row['make'].' '.$row['model'].'&lt;/h2&gt;&lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div&gt;&lt;img id="panel" style="padding-bottom: 100px" src="images/cars/'.$row['carIndex'].'.jpg" height="300"/&gt;&lt;div&gt; ';
    }
  }
  </code></pre>
  
  <p>I'm currently using Bootstrap, not sure if that would matter.</p>
  
  <p>I find it really strange that this would work for the first DIV but not any of the following ones. Do I perhaps need to place the script somewhere else? I'm really lost on this.  </p>
  
  <p>Any help appreciated -Tom</p>