[SOLVED] javascript effect only works on the first element but not on others?

javascript effect only works on the first element but not on others?

I am echoing records from the database which are wrapped with html tags and was trying to put some effect on the echoed data. When I click the edit link, the textfield should shake. It works on the first element but when I click the edit link of the next element, the first textfield still shakes and not the other one.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wallpost</title>
<style>

    .wallpost input[type="text"]{
        width: 500px;
        height: 20px;
    }

    .wallpost input[type="submit"]{
        height: 26px;
    }


    .user{
        font-weight: bold;
        font-size: 20px;
    }

    .post{
        font-family: Arial;
    }

    a{
        text-decoration: none;
    }

</style>
</head>
<body>

<?php

require_once 'dbconfig.php';



$user = $_SESSION['user'];; 

echo '<form action="post.php" method="post" class="wallpost"><input 
type="text" name="post" size="50"><input type="submit" name="wallpost" 
value="Post"></form>';

$query = $con->query("SELECT * FROM statuspost ORDER BY id DESC");

while($i = $query->fetch_object()){
    //echo $i->post.'  '.$i->id.' <a href="wallpost.php?type=post&
id='.$i->id.'" >Remove</a>'.'<br/>';
    echo '<span class="user">'.$i->user.'</span>'.'<br>'.'<span 
class="post">'.$i->post.'</span>'.' <form action="editpost.php?type=post&
id='.$i->id.'" method="post"><span id="edit"><input type="text"  
name="edit">
<br/><input type="submit" value="Edit"></span><a href="#" 
onclick="showEdit();">Edit </a><a href="remove.php?type=post&
id='.$i->id.'" >Remove</a></form> '.'<br/><br/>';
    //echo '<div id="post">'.$i->post.'  '.$i->id.'<a href="#" 
id="anchor" class="',$i->id,'" onclick="del();">Remove</a></div>  
<br/>';     

}


?>


<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0
/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0
/scriptaculous.js"></script>
<script>

 function showEdit(){

    Effect.Shake('edit');
 }

</script>
</body>
</html>

Solution

Replace <span id="edit"> by something like <span id="edit'.$i->id.'"> to have different ids on each elements. Then of course, showEdit() must know which id it has to shake, so it has to take a parameter. Or even simpler: replace onclick="showEdit();" by onclick="Effect.Shake(\'edit'.$i->id.'\');"