WP widget with dynamically added/repeatable fields

widget-repeatable-fields.php

<?php

class Clients_Module_Widget extends WP_Widget {

	function __construct() {
		parent::__construct(
		'client_logos', // Base ID
		__('Clients', 'text-domain'), // Name
		array( 'description' => __( 'Our Clients - logo list', 'text-domain' ), ) // Args
        	);
		
		add_action('admin_enqueue_scripts', array($this, 'upload_scripts'));
	}

	// upload scripts for enabling media uploader
	public function upload_scripts() {
		wp_enqueue_script('media-upload');
		wp_enqueue_script('thickbox');
		wp_enqueue_script('upload_media_widget', CHILD_URL . '/lib/upload_media.js', array('jquery'));
		wp_enqueue_style('thickbox');
	}

	public function widget( $args, $instance ) {

		$logos = isset( $instance['logos'] ) ? $instance['logos'] : array(); ?>
		<section class="our-clients">
			<div class="container-fluid">
				<div class="row">
					<h2 class="h3 section-title text-center"><span class="sup">Our</span> Clients</h2>
				</div><!-- /.row -->
				<div class="row">
					<div class="col-xs-12 col-lg-10 col-lg-offset-1">
						<div class="clients logos-row text-center"> 
							<?php foreach ($logos as $logo) { 
								foreach ($logo as $src => $value) { ?>
									<div class="client"><img src="<?php echo $value ?>" alt="logo"></div>
								<?php }
		                    			} ?>
						</div><!-- /.logos-row -->
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.container-fluid -->
		</section><!-- /.our-clients -->

	<?php }

    
	public function form( $instance ) {
       
		$logos = isset( $instance['logos'] ) ? $instance['logos'] : array();
		$logo_num = count($logos);
		$logos[$logo_num+1] = '';
		$logos_html = array();
		$logo_counter = 0;

		foreach ( $logos as $logo ) {   
			if ( isset($logo['title']) ) {	
				$logos_html[] = sprintf(
					'<div class="widget_image">
					<img class="meta_box_upload_image_preview" src="%4$s"  alt="image" style="max-width: 125px; height: auto;">
					<br>
					<input type="text" name="%2$s[%3$s][title]" value="%4$s" class=" widefat meta_box_upload_image_src sourc%3$s">
					<button class="upload_image_button button button-primary" style="margin:5px 5px 5px 0;">Upload</button>
					<span class="remove-field button button-secondary button-large" style="margin:5px 5px 5px 0;">Remove</span>
					</div>',
				
					'2',
					$this->get_field_name( 'logos' ),
					$logo_counter,
					esc_attr( $logo['title'] )
				);
			}
			$logo_counter += 1;
		}

		print '<h4>LOGOS</h4><br>' . join( $logos_html ); ?>
		
		<script type="text/javascript">
			var fieldname = <?php echo json_encode( $this->get_field_name('logos') ) ?>;
			var fieldnum = <?php echo json_encode( $logo_counter-1 ) ?>;
	
			jQuery(function($) {
				var count = fieldnum;
				$('.<?php echo $this->get_field_id( 'add_field' );?>').click(function() {
					$("#<?php echo $this->get_field_id( 'field_clone' );?>").append("<div class='widget_image'><img class='meta_box_upload_image_preview' src='<?php echo CHILD_URL . '/assets/img/no-image.png' ?>'  alt='image' style='max-width: 125px; height: auto;'><br><input type='text' name='"+fieldname+"["+(count+1)+"][title]' value='' class='hidden meta_box_upload_image_src widefat sourc"+(count+1)+"'><button class='upload_image_button button button-primary' style='margin:5px 5px 5px 0;'>Upload</button><span class='remove-field button button-secondary button-large' style='margin:5px 5px 5px 0;'>Remove</span></div>");
					count++;
				});
				$(".remove-field").live('click', function() {
					$(this).parent().remove();
				});
			});
		</script>
		
		<span id="<?php echo $this->get_field_id( 'field_clone' );?>"></span>

        <?php echo '<input class=" '.$this->get_field_id('add_field').' btn" type="button" value="' . __( 'Add logo', 'plus' ) . '" id="add_field" style="margin: 10px 0 15px; background: #000; color: #fff; border: none; text-transform: uppercase; font-size: 12px; padding: 8px 12px; cursor: pointer;" />';

	}

    
	public function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		
		$instance['logos'] = array();

		if ( isset( $new_instance['logos'] ) ) {
			foreach ( $new_instance['logos'] as $logo ) {
				if ( '' !== trim( $logo['title'] ) )
				$instance['logos'][] = $logo;
			}
		}

		return $instance;
	}
} 

function register_clients_module_widget() {
	register_widget( 'Clients_Module_Widget' );
}
add_action( 'widgets_init', 'register_clients_module_widget' );