Problema con varios forms

[Jota_sk]

Llevo un par de horas intentando solucionar mi problema pero no consigo encontrarle solucion. Te explico, tengo una pagina donde tengo varios formularios (uno para cada letra del abecedario) y en todo hay un campo donde sale la letra del abecedario, el problema es que si apreto el submit del formulario de la letra J el jQuery me coge el valor del primer formulario (el de la letra a).
Os pongo el codigo del menu y del jquery

MENU donde me muestra todo el abecedario con un form para cada uno

Código PHP:

<ul style="list-style:none;">
    <?php/*<li style="float:left;"><form method="get" action=""><input type="hidden" name="search" id="search_box" class='search_box' value="num"/><input type="submit" value="0-9" class="letra" /></form></li>*/?>
    <?php
        foreach(range('A', 'Z') as $letra) {
           echo '<li style="float:left;"><form method="get" action=""><input type="hidden" name="search" id="search_box" class="search_box"" value="'.$letra.'"/><input type="submit" value="'.$letra.'" class="letra" /></form></li>';
        }
    ?>
    <li style="clear: both;"></li>
</ul>
 

Codigo jquery que me envia el valor del primer form

Código Javascript:

<script type="text/javascript">
 
$(function() {
$(".letra").click(function() {
    var search_word = $("#search_box").val();
    var dataString = 'search_word='+ search_word;
    
    if(search_word=='')
    {
    }else{
    $.ajax({
    type: "GET",
    url: "searchtodas.php",
    data: dataString,
    cache: false,
    beforeSend: function(html) {
    document.getElementById("insert_search").innerHTML = ''; 
    $("#flash").show();
    $("#searchword").show();
     $(".searchword").html(search_word);
    $("#flash").html('<img src="img/preloader.gif" align="absmiddle">&nbsp;Buscando...');
            },
  success: function(html){
   $("#insert_search").show();
   $("#insert_search").append(html);
   $("#flash").hide();
  }
}); 
    }
    return false;
    });
});
</script>