[jQuery] Please help me to find my mistakes on below code

[bookme]

Hi,

I am trying to solve ajaxStart and ajaxStop issue from last 3 days but
can not solve...can somebody tell me what's my mistake here.

I want to show a loader image for different DOM element ids on
different ajax request. Problem is that when I am calling an ajax
request on one form submission then not only it's corresponding but
also other loader image is showing, while only one loader image must
be show.

Here is my code:



First Block code
-----------------------------------------------------------------------------------------------------------------
 <script>
$(document).ready(function(){
        $("form#submit").submit(function() {
                $.ajax({
                        type: "POST",
                        url: "test1.php",
                        success: function(del){
                                $('div.success').fadeIn();
                        }
                });
                jQuery('#id_fav_loading').ajaxStart(function() {
       jQuery('#id_fav_loading').show();
          }).ajaxStop   (function() {
                jQuery('#id_fav_loading').hide();;
          });
                return false;
        });
});
</script>

<div class="container">
        <form id="submit" method="post">
                <label for="lname">Client Last Name:</label>
                <input id="lname" class="text" name="lname" size="20" 
type="text" /
>
                        <button class="button positive"> <img 
src="../images/icons/
tick.png" alt="" /> Add Client </button>
        </form>
        <div style="display:none;" id="id_fav_loading">
        <img src="loader.gif" />
        </div>
        <div class="success" style="display:none;">
        Client has been added successfully.
        </div>
</div>
-----------------------------------------------------------------------------------------------------------------------------------------------------

Second block code
-------------------------------------------------------------------------------------------------------------------------------------------
<script>
$(document).ready(function(){
        $("form#submit1").submit(function() {
                $.ajax({
                        type: "POST",
                        url: "test1.php",
                        success: function(del){
                                $('div.success1').fadeIn();
                                }
                        });
                        jQuery('#id_fav_loading1').ajaxStart(function() {
                jQuery('#id_fav_loading1').show();
                  }).ajaxStop   (function() {
                        jQuery('#id_fav_loading1').hide();;
                  });
                        return false;
        });
});
</script>

<div class="container">
        <form id="submit1" method="post">
                <label for="lname">Client Last Name:</label>
                <input id="lname" class="text" name="lname" size="20" 
type="text" /
>
                        <button class="button positive"> <img 
src="../images/icons/
tick.png" alt="" /> Add Server </button>
        </form>
        <div style="display:none;" id="id_fav_loading1">
        <img src="loader.gif" />
        </div>
        <div class="success1" style="display:none;">
        Server has been added successfully.
        </div>
</div>


If I clicks on Add Client  then image for add client and add server is
displaying while only add client block loader image must be display.


Please help me to come out this problem.

Thanks