SO I have the attached code that produces a row of results from a db query. Instead of having a new window appear to make any edits to returned fields, I am trying to allow a dblclick on desired row and an editable row expands underneath it. Unfortunately, I get this to work for the first row returned, but any row below that does not acknowledge dblclick action...appreciate any help you can provide
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='jquery-2.0.3.js'></script>
<script>
$(document).ready(function(){
$("#flip").dblclick(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel{
padding:5px;
text-align:center;
background-color:purple;
border:solid 1px #c3c3c3;
}
#panel{
padding:10px;
display:none;
}
#flip{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<div >
<?php
$con = mysqli_connect('localhost','root','','ajax_demo');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user;";
$result = mysqli_query($con,$sql);
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr id='flip'>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
echo "<tr id='panel'>";
echo "<form action='#' method='GET'>";
echo "<td><input type='text' value='".$row['FirstName']."'></input></td>";
echo "<td><input type='text' value='".$row['LastName']."'></input></td>";
echo "<td><input type='text' value='".$row['Age']."'></input></td>";
echo "<td><input type='text' value='".$row['Hometown']."'></input></td>";
echo "<td><input type='text' value='".$row['Job']."'></input></td>";
echo "<td><input type='submit'></input></td>";
echo "</form>";
echo "</td>";
}
echo "</table>";
mysqli_close($con);
?>
</div>
</body>
</html>