AJAX加载不同表单提交的gif不同

我有一个页面，其中有3个表单。当我提交不同的提交时，我想显示3个不同的gif，但相反，它显示的是三个都相同的图像。此外，它不一致，因为有时它在第一次点击时显示gif，然后在接下来的两次点击中不显示，有时它在所有三次点击中都显示，但在那之后，如果我再次点击提交，则会显示结果，但它不会在加载gif图像时显示。这是我的代码：

<div id="wait"
  style="display: none; width: 32px; height: 43px; 
      position: absolute; top: 75%; left: 75%; padding: 2px;">
  <!-- this is one of the gifs -->
  <img src="images/demo_wait.gif" width="32" height="32" />
    <br> <br>Please Wait
</div>
    <div class="container">
        <h4 style="color: #447099;">Select a region to proceed</h4>
        <br> To Schedule:
        <form id="myform1" name="myform1"
            action="/AWSCustomerJavaWebFinal/ServiceAmazon" method="get"
            onsubmit="return promptMessage()">
            <select name="availableRegion" id="availableRegion"
                style="width: 142px; margin-left: 15px;" class="btn btn-primary">
                <option value="sr">Select Region</option>
                <option value="us-east-1">North Virginia</option>
            </select> Instance ID<input type="text" name="instanceId"> <input
                type="submit" id=button1 value="submit" class="btn btn-primary">
            <div id='content2'></div>
        </form>
        <script type="text/javascript">
            var form2 = $('#myform1');
            form2.submit(function() {
                $.ajax({
                    type : form2.attr('method'),
                    url : form2.attr('action'),
                    data : form2.serialize(),
                    success : function(data) {
                        var result2 = data;
                        $('#content2').html(result2);
                    }
                });
                return false;
            });
            $(document).ready(function() {
                $(document).ajaxStart(function() {
                    $("#wait").css("display", "block");
                });
                $(document).ajaxComplete(function() {
                    $("#wait").css("display", "none");
                });
            });
        </script>
    </div>
    <div class="container">
        <h3>View Instance Status:</h3>
        <form id="myform2" name="myform2"
            action="/AWSCustomerJavaWebFinal/ServiceInstances" method="get"
            onsubmit="return messagePrompt()">
            <select name="availableRegion" id="availableRegion"
                style="width: 142px; margin-left: 15px;" class="btn btn-primary">
                <option value="sr">Select Region</option>
                <option value="us-east-1">North Virginia</option>
            </select> <input type="submit" value="View Status" id="button2"
                class="btn btn-primary"><br></br>
            <div id='content'></div>
        </form>
        <script type="text/javascript">
            var form = $('#myform2');
            form.submit(function() {
                $.ajax({
                    type : form.attr('method'),
                    url : form.attr('action'),
                    data : form.serialize(),
                    success : function(data) {
                        var result = data;
                        $('#content').html(result);
                    }
                });
                return false;
            });
            $(document).ready(function() {
                $(document).ajaxStart(function() {
                    $("#wait").css("display", "block");
                });
                $(document).ajaxComplete(function() {
                    $("#wait").css("display", "none");
                });
            });
        </script>
    </div>
    <br>
</fieldset>
<div class="container">
    <form id="myform3" name="myform3" action="viewSchedule.jsp"
        method="get">
        <br> To view Schedule: <input type="submit"
            value="View Schedule" id="button3" class="btn btn-primary">
        <div id='content1'></div>
    </form>

    <script type="text/javascript">
        var form1 = $('#myform3');
        form1.submit(function() {
            $.ajax({
                type : form1.attr('method'),
                url : form1.attr('action'),
                data : form1.serialize(),
                success : function(data) {
                    var result1 = data;
                    $('#content1').html(result1);
                }
            });
            return false;
        });
        $(document).ready(function() {
            $(document).ajaxStart(function() {
                $("#wait").css("display", "block");
            });
            $(document).ajaxComplete(function() {
                $("#wait").css("display", "none");
            });
        });
    </script>
</div>

我试着为3个不同的图像使用不同的div id wait，wait1和wait3，在这个中更改了等待：

$(document).ready(function() {
            $(document).ajaxStart(function() {
                $("#wait").css("display", "block");
            });
            $(document).ajaxComplete(function() {
                $("#wait").css("display", "none");
            });
        });

并在3个不同的div容器中添加div id＝wait，似乎什么都不起作用。