How to dynamically add the the input text field in widget?

Question

I have made a widget with input fields. I want to make an add more button to dynamically add the input field the first input field is the default. How can I make it is it possible to do that?

Here is my widget code :

<?php 
class ExampleClasss extends WP_Widget {
    function __construct() {
        // Widget settings
        $widget_ops = array( 'classname' => 'exampleclass', 'description' => esc_html__( 'This is Just a practice widget', 'ex' ) );
        // Create the widget
        parent::__construct( 'exampleclass', __('Example widget', 'ex'), $widget_ops );
    }

    function widget( $args, $instance ) {
        extract( $args, EXTR_SKIP );
        $title = apply_filters( 'widget_title', $instance['title'] );
        $link1 = empty( $instance['link1'] ) ? '' : $instance['link1'];
        echo $before_widget;
        if ($title)
            echo $before_title . $title . $after_title; ?>
        <div class=""><?php echo wp_kses_post( $link1 ); ?></div>
        <?php
        echo $after_widget;
    }

    function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = sanitize_text_field( $new_instance['title'] );
        $instance['link1'] = sanitize_text_field( $new_instance['link1'] );
        return $instance;
    }


    function form( $instance ) {
        $instance = wp_parse_args( (array) $instance, array( 'Title' => esc_html__( 'About Me', 'ex' ) ) );

        $title = ( !empty($instance['title']) ? esc_attr( $instance['title'] ) : 'Title' );
        $link1 = ( !empty($instance['link1']) ? esc_textarea( $instance['link1'] ) : 'Link 1' );

        #   T I T L E
        $output = "<p>";
        $output .= "<label for='" . esc_attr( $this->get_field_id('title') ) . "'>".esc_html__( 'Title', 'ex')."</label>";
        $output .= "<input type=\"text\" class=\"widefat\" id='". esc_attr( $this->get_field_id( 'title' ) ) ."' name='". esc_attr( $this->get_field_name('title') ) ."' value='".$title."'></p>";

        #   A B O U T    M E     T E X T
        $output .= "<p>";
        $output .= "<label for='" . esc_attr( $this->get_field_id('link1') ) . "'>".esc_html__( 'Link 1 ' , 'ex' )."</label>&times;";
        $output .= "<input type=\"text\" class=\"widefat\" id='". esc_attr( $this->get_field_id( 'link1' ) ) ."' name='". esc_attr( $this->get_field_name('link1') ) ."' value='".$link1."'></p>";

        echo $output;
    }
}
function Example() {
    register_widget( 'ExampleClasss' );
}
add_action( 'widgets_init', 'Example' );


?>

Here is my screenshot. Hope this will clear my question!

Answer 1

How about jQuery append method? To make a counter, simply increment i variable every click.

$('body').on('click', '.add-more-button', function() {
  var i = 2;
  $('.widget-input').append('<label>Link' + i + '</label><input>');
  i++;
}

This is just an idea, I guess someone more experienced can develop it further.