WordPress: Front-end editable notepad

notepad.js

jQuery(document).ready(function($) {
	$('#notepad').click(function(e) {
		tag = e.target.tagName;
		if ( tag != 'TEXTAREA' && tag != 'INPUT' ) {
			contents = $(this).html();
			$(this).html( '<textarea style="display:block;width:98%;height:100px;">' + contents + '</textarea><input type="submit" class="save" style="position:relative;z-index:99" />' );
		}
	});

	$('#notepad input.save').live( 'click', function() {
		new_contents = $(this).siblings('textarea').val();

		$('#notepad').html( new_contents );
		change_notepad( new_contents );

		return false;
	});

	function change_notepad( notes ) {
		$('#notepad_response').text( '...' );
		$.post(notepad.ajaxurl,
			{
				'action' : 'change_notepad',
				'notes' : notes
			}, function(response) {
				//if (response != '') {
					//alert( response );
					$('#notepad_response').text( response );
				//}

			}, 'text' );
	}

});

notepad.php

<?php
/*
 * Plugin Name: Notepad
 * Description: This is a very rough plugin - Do not use in production!!! No support provided! Front-end editable notes widget. Saves notes in user meta for current user.
 */

require_once( plugin_dir_path( __FILE__ ) . 'wp-ajax.php' );

class notepad extends WP_Ajax {

	var $user;
	var $username;

	function __construct() {
		parent::__construct();
		add_action('init', array( &$this, 'setup') );
	}
	function setup() {
		$this->user = get_current_user_id();
		$this->username = get_userdata( $this->user )->user_login;
		$this->notes = get_user_meta( $this->user, 'notepad', true );
		$this->ph = '<em>no notes</em>'; //placeholder

		if (empty( $this->notes )) {
			$this->notes = $this->ph;
		}

		add_action('wp_enqueue_scripts', array( &$this, 'scripts') );
	}

	function scripts() {
		wp_enqueue_script( 'notepad', plugins_url( 'notepad.js', __FILE__ ), array( 'jquery' ) );
		wp_localize_script( 'notepad', 'notepad', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
	}

	function an_change_notepad() {

		$notes = trim( $_POST['notes'] );
		
		//if notes is empty, delete
		if ( empty($notes) ) {
			if ( delete_user_meta( $this->user, 'notepad' ) )
				die( 'notes deleted' );
		}
		//notes are the same, notes = placeholder, or resaving empty notes
		if ( $notes == $this->notes || $notes == $this->ph || ( empty($notes) && $this->notes == $this->ph) )
			die();

		//update
		if ( update_user_meta( $this->user, 'notepad', $notes ) )
			die( 'updated' );

		//hopefully, we don't get this far. if we do, something is wrong
		die( 'uh oh. notes could not be saved' );
	}

}
global $notepad;
$notepad = new notepad();


add_action( 'widgets_init', 'notepad_load' );
function notepad_load() {
	register_widget( 'Notepad_Widget' );
}
class Notepad_Widget extends WP_Widget {
	function Notepad_Widget() {
		$widget_ops = array('classname' => 'notepad', 'description' => __( 'Notepad. Only one instance please. Else this will break.', 'notepad' ) );
		$control_ops = array( 'id_base' => 'notepad' );
		parent::WP_Widget( 'notepad', __( 'Notepad', 'notepad' ), $widget_ops, $control_ops );
	}

	function widget( $args, $instance ) {
		extract( $args, EXTR_SKIP );
		echo $before_widget;

		global $notepad;
		$username = $notepad->username;
		$notes = $notepad->notes;

		//overwrite title
		$instance['title'] = 'Notepad for '. $username;

		echo $instance['hide_title'] ? '' : $before_title . $instance['title'] . $after_title;

		echo "<pre id='notepad' class='$username'>";
		echo $notes;
		echo '</pre><span style="float:left;color:#008;" id="notepad_response"></span><small style="float:right;">click notes to edit</small>';

		echo $after_widget;
	} //end widget()

	function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['title'] = esc_attr( $new_instance['title'] );
		$instance['hide_title'] = (bool) $new_instance['hide_title'] ? 1 : 0;
		return $instance;
	} //end update()

	function form( $instance ) {
		$instance = wp_parse_args( (array) $instance, array( 'hide_title' => 0 ) );
		extract( $instance );
		?>
		<p>
			<input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id('hide_title'); ?>" name="<?php echo $this->get_field_name('hide_title'); ?>"<?php checked( $hide_title ); ?> />
			<label for="<?php echo $this->get_field_id('hide_title'); ?>"><?php _e('Hide Title?', 'notepad' );?></label>
		</p>
		<?php
	} //end form()
}

wp-ajax.php

<?php

if (!class_exists('WP_Ajax')) {
class WP_Ajax {
	function __construct( $ajax_prefix = 'a', $nopriv_prefix = 'n' ) {
		$regex = "/^($ajax_prefix)?($nopriv_prefix)?_|^($nopriv_prefix)?($ajax_prefix)?_/";
		$methods = get_class_methods( $this );
		foreach ( $methods as $method ) {
			if ( preg_match( $regex, $method, $matches ) ) {
				if ( count( $matches ) > 1 ) {
					$action = preg_replace( $regex, '', $method );
					if ( count( $matches ) == 3 ) {
						add_action( "wp_ajax_$action", array( $this, $method ) );
						add_action( "wp_ajax_nopriv_$action", array( $this, $method ) );
					} else {
						if ( $matches[1] == $ajax_prefix ) {
							add_action( "wp_ajax_$action", array( $this, $method ) );
						} else {
							add_action( "wp_ajax_nopriv_$action", array( $this, $method ) );
						}
					}
				}
			}
		}
	}
}

}

how to make it loop, that the user can add more than one and display all of them in ul and li. could u help please?