multi form ajax php social comment system

Question

I have a lot of these forms that I post with PHP. They are under every article in my page, but when I submit the form with these ajax functions it only sends to the first form of the page. Why? I want send these form separately what am I doing wrong?

    <script type="text/javascript" >
    $(function() {
    $(".submit").click(function() 
    {
    var name = $("#name").val();
    var comment = $("#comment").val();
    var post_id = $("#post").val(); 
    var dataString = 'name='+ name  + '&comment=' + comment+ '&post_id=' + post_id;
    if(name==''  || comment=='')
    {
    alert('Please Give Valid Details');
    }
    else
    {
    $("#flash").show();
    $("#flash").fadeIn(400).html('<img src="images/loading.gif" />Loading Comment...');
    $.ajax({
    type: "POST",
    url: "commenti.php",
    data: dataString,
    cache: false,
    success: function(html){
    $("ol#update").append(html);
    $("ol#update li:last").fadeIn("slow");
    $("#flash").hide();
    }
    });
    }return false;
    });
    });   
<script>

 <ol id="update" class="timeline">
</ol>
    <div id="flash"></div>
    <div >
    <form action="#" method="post">
    <input type="hidden" id="post" value="<?php echo $post_id; ?>"/>
    <input type="hidden" id="name" value="<?php echo $username; ?>"/> 
    <textarea id="comment"></textarea><br />
    <input type="submit" class="submit" value=" Submit Comment " />
    </form>
    </div>

 <ol id="update" class="timeline">
</ol>
    <div id="flash"></div>
    <div >
    <form action="#" method="post">
    <input type="hidden" id="post" value="<?php echo $post_id; ?>"/>
    <input type="hidden" id="name" value="<?php echo $username; ?>"/> 
    <textarea id="comment"></textarea><br />
    <input type="submit" class="submit" value=" Submit Comment " />
    </form>
    </div>

 <ol id="update" class="timeline">
</ol>
    <div id="flash"></div>
    <div >
    <form action="#" method="post">
    <input type="hidden" id="post" value="<?php echo $post_id; ?>"/>
    <input type="hidden" id="name" value="<?php echo $username; ?>"/> 
    <textarea id="comment"></textarea><br />
    <input type="submit" class="submit" value=" Submit Comment " />
    </form>
    </div>

Answer 1

First of all, as has been said in the comments, don't use repetead IDs. If you don't intend to use Ids as a unique identifier, use classes.

<ol class="timeline update">
    <div id="flash"></div>
    <div >
        <form action="#" id="form" method="post">
            <input type="hidden" class="post" value="<?php echo $post_id; ?>"/>
            <input type="hidden" class="name" value="<?php echo $username; ?>"/> 
            <textarea class="comment"></textarea><br />
            <input type="submit" class="submit" value=" Submit Comment " />
        </form>
    </div>
</ol>

In your javascript code, you are trying to get the id name with var name = $('#name'), right? What name?

Also, try to send your requeste with an array rather than a string.

Something like this:

$(".submit").click(function() 
{
    var name = $(this).parents('form:input.name').val();
    var comment = $(this).parents('form:input.comment').val();
    var post_id = $(this).parents('form:input.post').val();
    var data = {'name': name,
                'comment': comment,
                'post_id':post_id},
    $.ajax({
        type: "POST",
        url: "commenti.php",
        data: data,
        success: function(html){
            //do stuff
        }             
}

Access your variable in PHP with $_POST['varName'];

Hope it helps.