php/ajax multiple form submit issue

[dechamp]

I have a thumb gallery that is pulled from the database. I am trying to use jquery/ajax to submit a form that will call the php script to mark images as broken in the database by hitting a button and doing it without it refreshing the page. I have the script working just fine but because I"m using php to print out the image thumbs the way i'm doing it is that each image has it's own "reportBrokenImg" form with 1 hidden field containing the id of the image and a submit button when click will hit the jquery/ajax script and then run the php to insert that image id into the database without refreshing the page.

 

The problem is, that the exact same form is used for every image and with 12-400+ images per page that mean there are just as many forms per page. So when I click on report image submit button on an image it actually submits every single id because they are all labled "id". i'm probably making no sense so here's the code below.

 

 

This following code below is the template that gets printed for every single image, you can see the form in the code.

<div class="thumbHolder">

    <div class="thumbCover"></div>

   

    <div class="thumbImg"><a href="%%linkUrl%%" target="blank"><img src="%%imgUrl%%" border="0" /></a></div>

    <div class="thumbButs">

        <a href="%%linkUrl%%&t=rand&t=join" target="blank" class="thumbViewBut"><span class="hidden">#</span></a>

        <div class="reportImg">

            <form method="post">

            <input id="imgId" name="imgId" type="hidden" value="%%id%%" />

            <input  type="submit" value="Submit" style=" background:#0060a1; color:#FFFFFF; font-size:14px; border:1px solid #0060a1; margin-left:12px" class="submit"/>

            </form>

        </div>

        <a href="#" class="thumbInfoBut">

            <p>

                <span>

                <div class="thumbDate">Date: %%date%% </div>

                <div class="thumbModel">%%model%%<!-- Type: %%typeName%% --></div>

                <div style="clear: both"></div>

                <div class="thumbDesc">%%description%%</div>

                </span>

            </p>

        </a>

    </div>

    <!-- thumbId is #%%id%% -->

</div>

 

 

and this is the javascript

$(function() {

$(".submit").click(function() {

var imgId = $("#imgId").val();

    var dataString = 'imgId='+ imgId;

if(imgId==''){

$('.success').fadeOut(200).hide();

$('.error').fadeIn(200).show();

$('.error').fadeOut(200).hide();

}else{

$.ajax({

type: "POST",

url: "inc/brokenImgReport.php",

data: dataString,

success: function(){

}

  });

 

$('.error').fadeOut(200).hide();

$('.success').fadeIn(200).show();

setTimeout(function() {

$('.success').fadeOut(200); }, 2000);

}

return false;

});

});

 

 

the ultimate goal is to do what it's currently doing (which is each images have a submit button that when click hits the javascript, then runs the php script to insert the thumbs information into the database) is does everything it's supposed to do but the issue is instead of it only returning the id from the individual form it returns the id from every from so basically theres no way for me to know which form id is ment to be added. I knw i need to get the ids a different name per form exp. id20, id21, id23 but clueless how to get the javascript to recognize the names.