widget w/repeater field

widget.php

<?php

class Nama_Widget_Classes extends WP_Widget {

	/*--------------------------------------------------*/
	/* Constructor
	/*--------------------------------------------------*/

	/**
	 * Specifies the classname and description, instantiates the widget,
	 * loads localization files, and includes necessary stylesheets and JavaScript.
	 */
	public function __construct() {

		// load plugin text domain
		add_action( 'init', array( $this, 'widget_textdomain' ) );

		// Hooks fired when the Widget is activated and deactivated
		register_activation_hook( __FILE__, array( $this, 'activate' ) );
		register_deactivation_hook( __FILE__, array( $this, 'deactivate' ) );

		parent::__construct(
			'nama-widget-classes',
			__( 'Nama Classes', 'nama-widget-classes' ),
			array(
				'classname'		=>	'nama-widget-classes',
				'description'	=>	__( 'Pulls in the featured classes to display within the widget.', 'nama-widget-classes' )
			)
		);

		add_action( 'admin_enqueue_scripts', array( $this, 'register_admin_scripts' ) );


	} // end constructor

	/*--------------------------------------------------*/
	/* Widget API Functions
	/*--------------------------------------------------*/

	/**
	 * Outputs the content of the widget.
	 *
	 * @param	array	args		The array of form elements
	 * @param	array	instance	The current instance of the widget
	 */
	public function widget( $args, $instance ) {

		extract( $args, EXTR_SKIP );

		$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Classes' );
		$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );

		$features = ( ! empty( $instance['features'] ) ) ? $instance['features'] : array();

		
		echo $before_widget;
		if ( $title ) echo $before_title . $title . $after_title;

		foreach( $features as $feature ) {
			echo '<div class="class-highlight">';
			echo '<h4>'.$feature['title'].'</h4>';
			echo '<p>'.$feature['description'].'</p>';
			echo '</div>';
		}

		echo $after_widget;

	} // end widget

	/**
	 * Processes the widget's options to be saved.
	 *
	 * @param	array	new_instance	The new instance of values to be generated via the update.
	 * @param	array	old_instance	The previous instance of values before the update.
	 */
	public function update( $new_instance, $old_instance ) {

		$instance = $old_instance;
		
		$instance['title'] = strip_tags($new_instance['title']);

		foreach($new_instance['features'] as $feature){
			$feature['title'] = strip_tags($feature['title']);
			$feature['description'] = strip_tags($feature['description']);
		}
		$instance['features'] = $new_instance['features'];

		return $instance;

	} // end widget

	/**
	 * Generates the administration form for the widget.
	 *
	 * @param	array	instance	The array of keys and values for the widget.
	 */
	public function form( $instance ) {

		$instance = wp_parse_args(
			(array) $instance
		);

		$title = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : ''; ?>
		<p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
		<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" /></p>
		<?php

		$features = ( ! empty( $instance['features'] ) ) ? $instance['features'] : array(); ?><span class="nama-widget-classes-additional"><?php

    $c = 0;
    if ( count( $features ) > 0 ) {
        foreach( $features as $feature ) {
            if ( isset( $feature['title'] ) || isset( $feature['description'] ) ) { ?>
			<p><label for="<?php echo $this->get_field_name( 'features' ) . '['.$c.'][title]'; ?>"><?php _e( 'Title:' ); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id( 'features' ) .'-'. $c.'-title'; ?>" name="<?php echo $this->get_field_name( 'features' ) . '['.$c.'][title]'; ?>" type="text" value="<?php echo $feature['title']; ?>" />
			<label for="<?php echo $this->get_field_name( 'features' ) . '['.$c.'][description]'; ?>"><?php _e( 'Description:' ); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id( 'features' ) .'-'. $c.'-description'; ?>" name="<?php echo $this->get_field_name( 'features' ) . '['.$c.'][description]'; ?>" type="text" value="<?php echo $feature['description']; ?>" /> <a class="nama-widget-classes-remove delete">Remove Feature</a></p>
			<?php
                $c = $c +1;
            }
        }
    }

    ?>
</span>
<a class="nama-widget-classes-add"><?php _e('Add Feature'); ?></a>
<script type="text/javascript">
	jQuery(document).ready(function($) {
    var count = 0;
    jQuery(".nama-widget-classes-add").on('click',function() { console.log('click');
    	event.preventDefault();
    	var additional = $(this).parent().parent().find('.nama-widget-classes-additional');
    	var container = $(this).parent().parent().parent().parent();
    	var container_class = container.attr('id');
		var container_class_array = container_class.split("nama-widget-classes-").reverse();
		var instance = container_class_array[0];
    	var add = $(this).parent().parent().find('.nama-widget-classes-add');
        count = additional.find('p').length;

        additional.append('<p><label for="widget-nama-widget-classes['+instance+'][features]['+count+'][title]">Title</label>'+
			'<input class="widefat" id="widget-nama-widget-classes-'+instance+'-features-'+count+'-title" name="widget-nama-widget-classes['+instance+'][features]['+count+'][title]" type="text" value="" />'+
			'<label for="widget-nama-widget-classes['+instance+'][features]['+count+'][description]">Description</label>'+
			'<input class="widefat" id="widget-nama-widget-classes-'+instance+'-features-'+count+'-description" name="widget-nama-widget-classes['+instance+'][features]['+count+'][description]" type="text" value="" /> <a class="nama-widget-classes-remove delete">Remove Feature</a></p>' );
    });
    jQuery(".nama-widget-classes-remove").live('click', function() {
        jQuery(this).parent().remove();
    });
});
</script>
<?php 

	} // end form

	/*--------------------------------------------------*/
	/* Public Functions
	/*--------------------------------------------------*/

	/**
	 * Loads the Widget's text domain for localization and translation.
	 */
	public function widget_textdomain() {

		//load_plugin_textdomain( 'nama-widget-classes', false, plugin_dir_path( __FILE__ ) . 'lang/' );

	} // end widget_textdomain

	/**
	 * Fired when the plugin is activated.
	 *
	 * @param		boolean	$network_wide	True if WPMU superadmin uses "Network Activate" action, false if WPMU is disabled or plugin is activated on an individual blog.
	 */
	public function activate( $network_wide ) {

	} // end activate

	/**
	 * Fired when the plugin is deactivated.
	 *
	 * @param	boolean	$network_wide	True if WPMU superadmin uses "Network Activate" action, false if WPMU is disabled or plugin is activated on an individual blog
	 */
	public function deactivate( $network_wide ) {

	} // end deactivate

	/**
	 * Registers and enqueues admin-specific styles.
	 */
	public function register_admin_styles() {

	} // end register_admin_styles

	/**
	 * Registers and enqueues admin-specific JavaScript.
	 */
	public function register_admin_scripts() {

		wp_enqueue_script( 'nama-widget-classes-admin-script', get_stylesheet_directory_uri() . '/inc/widgets/js/featured-classes.js', array('jquery') );

	} // end register_admin_scripts

	/**
	 * Registers and enqueues widget-specific styles.
	 */
	public function register_widget_styles() {

	} // end register_widget_styles

	/**
	 * Registers and enqueues widget-specific scripts.
	 */
	public function register_widget_scripts() {

	} // end register_widget_scripts

} // end class

add_action( 'widgets_init', create_function( '', 'register_widget("Nama_Widget_Classes");' ) );