js끼리 충돌 왜이러는거죠? 채택완료

js스크립트가 충돌해서 하나가 작동하면 다른 스크립트가 작동안하네요

제가 네비(boxcategory.skin)에 자바스크립트 하나 심었구요/

네비자바스크립트 경로는 skin/shop/basic/boxcategory.skin.php 입니다

그리고 충돌되는 자바스크립트는  item.form.skin.php/ shop.js 과 충돌되는거같은데요

왜 이러는거죠 

각각의 js코드도 올려보겠습니다 ㅠㅠ

먼저 - > boxcategory.skin.php 안에있는 example.js 입니다

$(function(){

    var $el, leftPos, newWidth,

        $mainNav = $("#gnb_1dul"),

        $mainNav2 = $("#example-two");

    /*

        EXAMPLE ONE

    */

    $mainNav.append("

    var $magicLine = $("#magic-line");

    $magicLine

        .width($("#gnb_1dul >li:first ").width())

        .css("left", $("#gnb_1dul >li:first a").position().left)

        .data("origLeft", $magicLine.position().left)

        .data("origWidth", $magicLine.width());

    $("#gnb_1dul li").find("a").hover(function() {

        $el = $(this);

        leftPos = $el.position().left;

        newWidth = $el.parent().width();

        $magicLine.stop().animate({

            left: leftPos,

            width: newWidth

        });

    }, function() {

        $magicLine.stop().animate({

            left: $magicLine.data("origLeft"),

            width: $magicLine.data("origWidth")

        });    

    });

    /*

        EXAMPLE TWO

    */

    $mainNav2.append("

    var $magicLineTwo = $("#magic-line-two");

    $magicLineTwo

        .width($(".current_page_item_two").width())

        .height($mainNav2.height())

        .css("left", $(".current_page_item_two a").position().left)

        .data("origLeft", $(".current_page_item_two a").position().left)

        .data("origWidth", $magicLineTwo.width())

        .data("origColor", $(".current_page_item_two a").attr("rel"));

    $("#example-two li").find("a").hover(function() {

        $el = $(this);

        leftPos = $el.position().left;

        newWidth = $el.parent().width();

        $magicLineTwo.stop().animate({

            left: leftPos,

            width: newWidth,

            backgroundColor: $el.attr("rel")

        })

    }, function() {

        $magicLineTwo.stop().animate({

            left: $magicLineTwo.data("origLeft"),

            width: $magicLineTwo.data("origWidth"),

            backgroundColor: $magicLineTwo.data("origColor")

        });    

    });

}); 

그리고 충돌되는 item.form.skin.php안에 있는 자바스크립트와 /​ shop.js 자바스크립트인데요

먼저 item.form.skin.php 부터 올리겠습니다.

방법좀 찾아주시면 너무 감사드리곘습니다

일단 기본적으로 왜 js끼리 충돌되는지가 궁금합니다....