how to execute two javascripts in one php file?

Question

I've included two javascripts in one php file. First one is camera and 2nd is carouFredSel. But they don't run together. If I remove the 2nd one, then 1st one works properly. If I keep both then only 2nd one runs. But I want to run both files. Somebody please help me to get out of it.

    <script type='text/javascript' src='java_slider/scripts/jquery.min.js'></script>
    <script type='text/javascript' src='java_slider/scripts/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='java_slider/scripts/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='java_slider/scripts/camera.min.js'></script> 

    <script>
        jQuery(function(){

            jQuery('#camera_random').camera({
                thumbnails: true
            });
        });
    </script>




    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_findObj(n, d) { //v4.01
    var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
     }
   function MM_swapImage() { //v3.0
   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
     }
    //-->
    </script>
        <!-- include jQuery + carouFredSel plugin -->
        <script type="text/javascript" language="javascript" src="java/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" language="javascript" src="java/jquery.carouFredSel-6.2.1-packed.js"></script>
        <!-- fire plugin onDocumentReady -->
        <script type="text/javascript" language="javascript">
            $(function() {

                //  Basic carousel, no options
                $('#foo0').carouFredSel();

                //  Basic carousel + timer, using CSS-transitions
                $('#foo1').carouFredSel({
                    auto: {
                        pauseOnHover: 'resume',
                        progress: '#timer1'
                    }
                }, {
                    transition: true
                });

                //  Scrolled by user interaction
                $('#foo2').carouFredSel({
                    auto: true,
                    prev: '#prev2',
                    next: '#next2',
                    pagination: "#pager2",
                    mousewheel: true,
                    swipe: {
                        onMouse: true,
                        onTouch: true
                    }
                });

                //  Variable number of visible items with variable sizes
                $('#foo3').carouFredSel({
                    width: 360,
                    height: 'auto',
                    prev: '#prev3',
                    next: '#next3',
                    auto: false
                });

                //  Responsive layout, resizing the items
                $('#foo4').carouFredSel({
                    responsive: true,
                    width: '100%',
                    scroll: 2,
                    items: {
                        width: 400,
                    //  height: '30%',  //  optionally resize item-height
                        visible: {
                            min: 2,
                            max: 6
                        }
                    }
                });

                //  Fuild layout, centering the items
                $('#foo5').carouFredSel({
                    width: '100%',
                    scroll: 2
                });
            });
        </script>

        <style type="text/css" media="all">
            .wrapper {
                background-color: #D1D1D1;
                width: 670px;
                box-shadow: 0 0 5px #999;
                margin: auto;
                height: 181px;
            }
            .list_carousel {
                height: 100px;
                width: 670px;
                margin: auto;
            }
            .list_carousel ul {
                list-style: none;
                display: block;
                padding-left: 0.5px;
            }
            #foo2{
                margin-left: 15px;
                margin-top: -10px;
            }
            .list_carousel li {
                font-size: 20px;
                color: #999;
                text-align: center;
                background-color: #eee;
                width: 194px;
                height: 155px;
                margin: 5px;
                display: block;
                float: left;
                margin-left: 8px;
            }
            .list_carousel.responsive {
                width: auto;
                margin-left: 0;
            }
            .clearfix {
                float: none;
                clear: both;
            }
            .prev {
                float: left;
                margin-left: 2px;
                margin-top: 80px;
            }
            .next {
                float: right;
                margin-right: 2px;
                margin-top: 80px;
            }
            .pager {
                float: left;
                width: 300px;
                text-align: center;
            }
            .pager a {
                margin: 0 5px;
                text-decoration: none;
            }
            .pager a.selected {
                text-decoration: underline;
            }
            .timer {
                background-color: #999;
                height: 6px;
                width: 0px;
            }
        </style>
        <div class="wrapper">      
    <a id="prev2" class="prev" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/left_arrow_hover.png',1)"><img src="images/left_arrow.png" name="Image2" width="21" height="28" border="0"></a>   
<a id="next2" class="next" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/right_arrow_hover.png',1)"><img src="images/right_arrow.png" name="Image4" width="21" height="28" border="0"></a>

Answer 1

You have added jquery-1.8.2.min.js && jquery.min.js. Both are same , remove one of them

EDIT

Do the following steps:

remove jquery-1.8.2.min.js

Put jquery.min.js on the top of all other scripts

replace all $( with jQuery(