more than one scripts in the same page

Question

I am using more than one script elements in a single page.The problem is when I insert the scripts for autocomplete the remaining working scripts become unresponsive and only the autocomplete scripts are working.

Here is my scripting codes and all the codes are working properly.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript" src="calendar/calendar.js"></script>
<script language="javascript">

<script language="javascript" src="calendar/calendar.js"></script>
<script language="javascript">
  function     validate    (evt)     {
      var     theEvent     =     evt     ||     window.event;
      var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 35 || key == 36 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}
</script>

<script language="javascript">
$( document ).ready(function() {
var relval=2;
    $("#relative_addmore").click(function ()
    {
    var newTextBoxDiv = $(document.createElement('div')).attr("id",'relative_div'+relval);
        var param='c=14&count='+ relval;                 
        $.ajax({url:"job_ajax.php",data: param,success:function(result)
        {
            newTextBoxDiv.after().html(result);
        }
        }); 
        relval++;           
        $("#relative_group").append(newTextBoxDiv);
    });

    });
</script>
<script>
//........................Remove button...............
$( document ).ready(function() {
    $("body").on("click","#removeButton", function()
    {
        //user click on remove text
        var a= $(this).parents('div').attr('id');
        //alert(a);
        $("#"+a).remove();
    }); 

    });
</script>

<script language="javascript">
$(document).ready(function()
{
    $("#number1").change(function()
    {
        var value = $("#number1").val();

        var value = value.substr(value.length - 10);

        var pn = value.length;

        var action = $("#action").val();
        $('input[type="submit"]').removeAttr('disabled');
        $("#msgbox1").removeClass().addClass('messagebox').text('').fadeIn("fast");

            $("#msgbox1").removeClass().addClass('messagebox').text('').fadeIn("fast");
            $.post("phone_avilable.php",{number1:value},function(data)
            {

              if(data!='' && action!="update")
              {
                $("input[type=submit]").attr("disabled", "disabled");
                $("#msgbox1").fadeTo(200,0.1,function()
                { 
                  $(this).html("<a href=''><font color='red'>Exist! Click Here..</font></a>").addClass('messagebox').fadeTo(100,1);
                }); 
                        return false;   
              }

            });
    });
});
</script>

<script language="javascript">
$(document).ready(function()
{
    $("#number2").change(function()
    {
        var value = $("#number2").val();

        var value = value.substr(value.length - 10);

        var pn = value.length;
        var action = $("#action").val();
        $('input[type="submit"]').removeAttr('disabled');
        $("#msgbox1").removeClass().addClass('messagebox').text('').fadeIn("fast");

            $("#msgbox1").removeClass().addClass('messagebox').text('').fadeIn("fast");
            $.post("phone_avilable1.php",{number1:value},function(data)
            {
              if(data!='' && action!="update")
              {
                $("input[type=submit]").attr("disabled", "disabled");
                $("#msgbox1").fadeTo(200,0.1,function()
                { 
                  $(this).html("<a href=''><font color='red'>Exist! Click Here..</font></a>").addClass('messagebox').fadeTo(100,1);

                }); 
                        return false;   
              }

            });
    });
});
</script>

When I added this scripts on to the same page, the above mentioned codes are stopped working.only the below one is working.

<link rel="stylesheet" type="text/css" href="jquery.ajaxcomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ajaxcomplete.js"></script>
<script>
$(document).ready(function(){
$("#location").autocomplete("ajaxcomplete.php", {
selectFirst: true
});
});
</script><link rel="stylesheet" type="text/css" href="jquery.ajaxcomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ajaxcomplete.js"></script>
<script>
$(document).ready(function(){
$("#location").autocomplete("ajaxcomplete.php", {
selectFirst: true
});
});
</script>

Separately both two set of scripts are working. But not working together.

Answer 1

In your first script you have this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript" src="calendar/calendar.js"></script>
<script language="javascript">

<script language="javascript" src="calendar/calendar.js"></script>
<script language="javascript">
function     validate    (evt)     {
      var     theEvent     =     evt     ||     window.event;
      var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 35 || key == 36 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}
</script>

Not sure if you notice the <script language="javascript"> on line 3 being opened but never closed