widgets admin page and js inside widget…

Ok so here’s the question:
I have registered a custom widget inside of my functions.php, the widget has custom js inside it the code is as follows:

/*
*
*Ajax loaded gallery for sidebar
*Note tis will not work cross browser.
*
*
*/
/**
 * Plugin Name: A gallery Widget
 * Description: A widget that displays an ajax loaded gallery.
 * Version: 0.1
 */

add_action( 'widgets_init', 'my_widget' );

function my_widget() {
  register_widget( 'MY_Widget' );
}

class MY_Widget extends WP_Widget {

  function MY_Widget() {
    $widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the chosen gallery images and link from lundhs ', 'example') );

    $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' );

    $this->WP_Widget( 'example-widget', __('Reference Projects', 'example'), $widget_ops, $control_ops );
  }

  function widget( $args, $instance ) {
    extract( $args );

    //Our variables from the widget settings.
    $titlewidget = apply_filters('widget_title', $instance['titlewidget'] );
    $introtext = $instance['introtext'];
    $title = $instance['title'];
    $name = $instance['name'];
    $img = $instance['img'];
    $show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false;

    echo $before_widget;

?>
<?php
if($titlewidget)
  ?>

<h4 class="widget-title"><?php echo $titlewidget;?></h4>
<?php
if($introtext)
?>
<p> <?php echo $introtext; ?></p>
    <div class="row">
<?php
//display gallery img
if ( $img)
  ?>
<a class="columns four" href="<?php echo $name; ?>">
     <img class="imggallery" src="<?php echo $img; ?>">
   </a>
    <?php
  // Display the gallery name and link
    if ( $title )
      ?>
     <a class="columns eight imggallery_link" href="<?php echo $name; ?>"><?php echo $title; ?></a>

</div>

<?php
    echo $after_widget;
  }

  //Update the widget 

  function update( $new_instance, $old_instance ) {
    $instance = $old_instance;

    //Strip tags from title and name to remove HTML
    $instance['titlewidget'] = strip_tags( $new_instance['titlewidget'] );
    $instance['introtext'] = strip_tags( $new_instance['introtext'] );
    $instance['title'] = strip_tags( $new_instance['title'] );
    $instance['name'] = strip_tags( $new_instance['name'] );
    $instance['show_info'] = $new_instance['show_info'];
    $instance['img'] = $new_instance['img'];

    return $instance;
  }

  function form( $instance ) {

    //Set up some default widget settings.
    $defaults = array( 'title' => __('Example', 'example'), 'introtext' => __('introtext', 'example'), 'titlewidget' => __('Reference Project', 'example'), 'img' => __('img', 'example'), 'name' => __('link goes here', 'example'), 'show_info' => true );
    $instance = wp_parse_args( (array) $instance, $defaults ); ?>
<script type="text/javascript">
(function($) {

//load on page load
  $(".area").load("/galleries/ #projects > li a");

//load on widget title click
            $('.widget-top').live("click", function() {
             $(".area").load("https://nettsidemal.no/lundhsas/galleries/ #projects > li a");
            });

//stop default href from working
            $('.area a').unbind().live("click", function() {
                             event.preventDefault();
                             return;
             });
//load into input boxes
$(".area a").live("click", function() {
      var title = $(this).attr('title');
      $(".title").val(title);
      var link = $(this).attr('href');
      $(".link").val(link);
      var img = $("img", this).attr('src');
      $(".img").val(img);
      var imgexample = $("img", this).attr('src');
      $(".gallery_one").attr("src", imgexample);
    });
}(jQuery));
</script>
<style type="text/css">
.area img{
    max-width: 100px;
    max-height: 100px;
    display: inline-block;
}
.area a{
    max-width: 100px;
    max-height: 100px;
    display: inline-block;
}
.gallery_one_image_wrap{
  width: 100%;
height: 150px;
}
.gallery_one{
max-width: 80%;
max-height: 150px;
width: 80%;
margin: auto;
padding-left: 10%;
padding-right: 10%;
}
</style>
<script type="text/javascript">
(function($) {
        var addDiv = jQuery('.addinput');
        var i = jQuery('.addinput p').size() + 1;

    jQuery('.addNew').live('click', function() {
        jQuery.append('<p><input type="text" class="p_new' + i +'" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" class="remNew">Remove</a> </p>');
        i + 1;

        return false;
    });

    jQuery('.remNew').live('click', function() {
          if( i > 1 ) {
          jQuery(this).parents('p').remove();
          i - 1;
          }
    return false;
    });
}(jQuery));

</script>
   <h3>Gallery selector for Lundhs</h3>
    <p>
    <label for="<?php echo $this->get_field_id( 'titlewidget' ); ?>"><?php _e('Widget Title:', 'example'); ?></label>
      <input type="text" class="titlewidget" name="<?php echo $this->get_field_name( 'titlewidget' ); ?>" value="<?php echo $instance['titlewidget']; ?>" style="width:100%;" />
    </p>
    <p>
    <label for="<?php echo $this->get_field_id( 'introtext' ); ?>"><?php _e('Intro text:', 'example'); ?></label>
      <input type="text" class="introtext" name="<?php echo $this->get_field_name( 'introtext' ); ?>" value="<?php echo $instance['introtext']; ?>" style="width:100%;" />
    </p>
      <h4 style="text-align: center;">First Pick your images</a>
    <div class="area"></div>

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
    <h3>Your current front end projects</h3>
    <h4>Reference project one</h4>
    <div class="gallery_one_image_wrap">
    <img class="gallery_one" src="<?php echo $instance['img']; ?>" /><br/>
    </div>
    <p>
      <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'example'); ?></label>
      <input type="text" class="title" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
    </p>
    <p>
      <label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('The link:', 'example'); ?></label>
      <input type="text" class="link" id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" />
    </p>

    //img Input.
    <p>
      <label for="<?php echo $this->get_field_id( 'img' ); ?>"><?php _e('The Link to the image:', 'example'); ?></label>
      <input type="text" class="img" id="<?php echo $this->get_field_id( 'img' ); ?>" name="<?php echo $this->get_field_name( 'img' ); ?>" value="<?php echo $instance['img']; ?>" style="width:100%;" />
    </p>
<div class="addinput">
<p>
<a href="#" class="addNew">Add new project</a>
</p>
</div>
  <?php
  }
}

the problem arises because the js runs twice once in the inactive widgets on the left and once in the active widget in the sidebar.
How do i go about forcing the JS to run only in the active widget.
Moving the js to a separate .js file and enqueing really isn’t an option for me because i am going to have to use php values in the next step.
Any help is appreciated.
Chris