JS - jQuery Dynamic add remove Input Fields

Question

I have a form where I add Input fields ( groups ) dynamically.

It is quite a complex form, and a PART can be seen here : FIDDLE

The actual error i get on the consul is :

Error: uncaught exception: query function not defined for Select2 s2id_autogen1

When I have fields already in the form ( the first two for example ) the EDIT and REMOVE button will work just fine .

My problem is that the REMOVE button ( styled input field ) is not working for the dynamically ADDED fields ( actually "appended" by JS and populated from PHP )

NOTE on code: I know the code is a mess :-(. It was inherited and will be cleaned soon.

it was copied and pasted from the HTML output.

The ADD , REMOVE and EDIT are actually styled like buttons ( too long and irrelevant to paste )

The actual source is PHP and it is spanning over multiple files ( so is the JS ) , and thus a bit too complicated to show here .

UPDATE : The code as per popular request :-)

  public function show_field_repeater( $field, $meta ) {
    global $post;  
    // Get Plugin Path
    $plugin_path = $this->SelfPath;
    $this->show_field_begin( $field, $meta );
    $class = '';
      if ($field['sortable'])  
        $class = " repeater-sortable";
    echo "<div class='at-repeat".$class."' id='{$field['id']}'>";

    $c = 0;

    $meta = get_post_meta($post->ID,$field['id'],true);


      if (count($meta) > 0 && is_array($meta) ){
         foreach ($meta as $me){
           //for labling toggles
           $mmm =  isset($me[$field['fields'][0]['id']])? $me[$field['fields'][0]['id']]: "";
           echo '<div class="at-repater-block at-repater-block-'.$c.$field['id'].'"><h3>'.$mmm.' 
             <span class="at-re-remove">
             <input id="remove-'.$c.$field['id'].'" class="buttom button-primary" type="submitkb" value="Remove '.$field['name'].'" accesskey="x" name="removek">
            </span>';


             echo '<script>
        jQuery(document).ready(function() {
              jQuery("#remove-'.$c.$field['id'].'").on(\'click\', function() {
                     var answer = confirm("Are you sure you want to delete this field ??")     
                   if(!answer){
                      event.preventDefault();    
                   }


                  jQuery(".at-repater-block-'.$c.$field['id'].'").remove();

              });
          });
        </script>';  

           echo '<span class="at-re-toggle">
           <input id="edit-'.$field['id'].'" class="buttom button-primary" type="" value="Edit '.$field['name'].'" accesskey="p" name="editk"></h3>
           </span>

          <span style="display: none;">

           <table class="repeate-box wp-list-table widefat fixed posts" >';
           if ($field['inline']){
             echo '<tr class="post-1 type-post status-publish format-standard hentry category-uncategorized alternate iedit author-self" VALIGN="top">';
           }
        foreach ($field['fields'] as $f){
          //reset var $id for repeater
          $id = '';
          $id = $field['id'].'['.$c.']['.$f['id'].']';
          $m = isset($me[$f['id']]) ? $me[$f['id']]: '';
          $m = ( $m !== '' ) ? $m : $f['std'];
          if ('image' != $f['type'] && $f['type'] != 'repeater')
            $m = is_array( $m) ? array_map( 'esc_attr', $m ) : esc_attr( $m);
          //set new id for field in array format
          $f['id'] = $id;
          if (!$field['inline']){
            echo '<tr>';
          } 
          call_user_func ( array( &$this, 'show_field_' . $f['type'] ), $f, $m);
          if (!$field['inline']){
            echo '</tr>';
          } 
        }
        if ($field['inline']){  
          echo '</tr>';
        }
        echo '</table></span>
        <span class="at-re-toggle"><img src="';
           if ($this->_Local_images){
             echo $plugin_path.'/images/edit.png';
           }else{
             echo 'http://i.imgur.com/ka0E2.png';
           }
           echo '" alt="Edit" title="Edit"/></span> 
        <img src="';
        if ($this->_Local_images){
          echo $plugin_path.'/images/remove.png';
        }else{
          echo 'http://i.imgur.com/g8Duj.png';
        }
        echo '" alt="'.__('Remove','mmb').'" title="'.__('Remove','mmb').'"></div>';
        $c = $c + 1;

        }
      }

    echo '<img src="';
    if ($this->_Local_images){
      echo $plugin_path.'/images/add.png';
    }else{
      echo 'http://i.imgur.com/w5Tuc.png';
    }
    echo '" alt="'.__('Add','mmb').'" title="'.__('Add','mmb').'" ><br/><input id="add-'.$field['id'].'" class="buttom button-primary" type="submitk" value="Add '.$field['name'].'" accesskey="q" name="addk"></div>';

    //create all fields once more for js function and catch with object buffer
    ob_start();


    echo '<div class="at-repater-block">';


     echo '<table class="wp-list-table repeater-table">';


    if ($field['inline']){
      echo '<tr class="post-1 type-post status-publish format-standard hentry category-uncategorized alternate iedit author-self" VALIGN="top">';
    } 

    foreach ($field['fields'] as $f){
      //reset var $id for repeater
      $id = '';
      $id = $field['id'].'[CurrentCounter]['.$f['id'].']';
      $f['id'] = $id; 

      if (!$field['inline']){
        echo '<tr>';
      }

      if ($f['type'] != 'wysiwyg')
        call_user_func ( array( &$this, 'show_field_' . $f['type'] ), $f, '');
      else
        call_user_func ( array( &$this, 'show_field_' . $f['type'] ), $f, '',true);
      if (!$field['inline']){
        echo '</tr>';
      }  
    }
     $js_code2 ='<span class=\"at-re-remove\"><input id="remove-'.$c.$field['id'].'" class="buttom button-primary remove-'.$c.$field['id'].'" type="submi7" value="Removevv " accesskey="7" name="remove7"></span>';
    if ($field['inline']){
      echo '</tr>';
    } 



     $js_code2 = str_replace("\n","",$js_code2);
     $js_code2 = str_replace("\r","",$js_code2);
    $js_code2 = str_replace("'","\"",$js_code2);
    echo $js_code2;
    echo '</table><img src="';
    if ($this->_Local_images){
      echo $plugin_path.'/images/remove.png';
    }else{
      echo 'http://i.imgur.com/g8Duj.png';
    }
    echo '" alt="'.__('Remove','mmb').'" title="'.__('Remove','mmb').'" ></div>';
    $counter = 'countadd_'.$field['id'];
    $js_code = ob_get_clean ();
    $js_code = str_replace("\n","",$js_code);
    $js_code = str_replace("\r","",$js_code);
    $js_code = str_replace("'","\"",$js_code);
    $js_code = str_replace("CurrentCounter","' + ".$counter." + '",$js_code);

  echo '<script>
        jQuery(document).ready(function() {
          var '.$counter.' = '.$c.';
          jQuery("#add-'.$field['id'].'").on(\'click\', function() {
            '.$counter.' = '.$counter.' + 1;
            jQuery(this).before(\''.$js_code.'\'); 
             // jQuery("#'.$field['id'].'").append(\''.$js_code2.'\'); 
             // alert(\''.$js_code2.'\');
            update_repeater_fields();
          });

          });
        </script>';  
        echo '<script>
        jQuery(document).ready(function() {

              jQuery(".remove-'.$c.$field['id'].'").on(\'click\', function() {
                     var answer = confirm("Are you sure you want to delete this field ??")     
                   if(!answer){
                      event.preventDefault();    
                   }
                  jQuery(".remove-'.$c.$field['id'].'").remove(); 
              });
          });
        </script>';  
    echo '<br/><style>
.at-inline{line-height: 1 !important;}
.at-inline .at-field{border: 0px !important;}
.at-inline .at-label{margin: 0 0 1px !important;}
.at-inline .at-text{width: 70px;}
.at-inline .at-textarea{width: 100px; height: 75px;}
.at-repater-block{background-color: #FFFFFF;border: 1px solid;margin: 2px;}
</style>';
    $this->show_field_end($field, $meta);
  }

Answer 1

OK so as you've already been told, the live is deprecated.

Here's the fiddle of the solution: http://jsfiddle.net/y8JFb/2/

Basically give each new div that you dynamically create a unique ID based on your counter, then give data attribute to your remove counter which contains that ID.

Then you have your click handler:

$( document ).on( "click", ".at-re-remove", function( e ) {
    $("#"+$(e.target).data("remove")).remove();
    $(e.target).remove();
} );