First button works fine, but the others are out of order.

I have this code:

common.js

This is integrated in index.php:
header:

Body:

The first button works fine, but others do not work. What shall I do?

 

First of all id is suppose to be unique.. so use <input class="mizuButton"
try this

$(".mizuButton").each(function(){
    $(this).click(function(){
         var ertek = $(this).attr("rel");
         //continue ajax code here...
    })
})

PHP:

 

I use this:
common.js

index.php

This looks like good, but the button works one after the other. For example: when I would like to click on Téma3, I have to click before this action on Téma1 and Téma2 too.
What shall I do?

 

index.php

<input class="mizuButton"  type="button" name="mizu" value="Téma1" rel="s" />
<input class="mizuButton" type="button" name="mizu" value="Téma3" rel="123" />
<input class="mizuButton" type="button" name="mizu" value="Téma2" rel="5" />
<input class="mizuButton" type="button" name="mizu" value="Téma4" rel="555" />

PHP:

javascript :

$("input .mizuButton").each(function(){
//find every input that has .mizuButton Class 
$(this).click(function(){
//for every button set up a listiner for a click
var ertek = $(this).attr("rel");
//$(this) is the button jquery object. it changes everytime on diffrent clicks
$.ajax({
url: "./mizu.php",
data: "mizu="+ertek,
type: "post",
success: function(h) {
$("#content").html(h);
}
});

PHP:

this is the only thing you need...
try it and tell me if it worked

good luck

 

Thanks, but this code doesn't work.
I don't understand this.