'WordPress color picker problem in repeater field

I have created custom metabox with repeater fields. The problem is after cloning repeater field the popup box doest not show. Is anyone met problem like this? I found some useful article for it, but it seems I can not use it for current functions. Here is link for it: https://wp-qa.com/using-wp-color-picker-in-repeatable-fields

Here is my code:

add_action( 'add_meta_boxes',  'add_metabox_to_backend_product', 10, 5 );
function add_metabox_to_backend_product( $post_type ) {
    $post_types = array('product');     //limit meta box to certain post types
    global $post;
    
    if ( in_array( $post_type, $post_types )  ) {
        add_meta_box(
            'connected_products'
            ,__( 'Свързани продукти', 'woocommerce' )
            ,'svarzani_produkti_content'
            ,$post_type
            ,'normal'
            ,'high'
        );
    }
}

function svarzani_produkti_content() {
    global $post;
    echo '<h5>Избери различни цветови комбинации</h5>';
    $gpminvoice_group = get_post_meta($post->ID, 'connected_products', true);
     wp_nonce_field( 'striweb_repeatable_meta_box_nonce', 'striweb_repeatable_meta_box_nonce' );
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function( $ ){
  
        $( '#add-row' ).on('click', function() {

            var row = $( '.empty-row.screen-reader-text' ).clone();
            row.removeClass( 'empty-row screen-reader-text' );
            row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );   
            return false;

        });     
        
        /*$( '#add-row' ).on('click', function() { 
            var field = $('#repeatable-fieldset-one tbody>tr:last').find('.striweb-cvqt');
            console.log(field.html());
            //field.hide();
        return false;

        });*/

        $( '.remove-row' ).on('click', function() {
            $(this).parents('tr').remove();
            return false;
        });
        
        $('.cvqt-striweb').each(function(){
            $(this).wpColorPicker();
        });

   /* $('.clone-it').click (function () {
        var field = $(this).prev('.wp-picker-container').find('.cvqt-striweb').clone();
        $(field).val('') ;
        $(this).before(field) ;
        $(field).wpColorPicker();       
        return false;
     }); */
    
    });
  </script>
  <table id="repeatable-fieldset-one" width="100%">
      <thead style="text-align:left;">
          <tr>
              <th scope="col">Цвят</th>
              <th scope="col">Линк</th>
          </tr>
    </thead>
  <tbody>
    <?php
     if ( $gpminvoice_group ) :
      foreach ( $gpminvoice_group as $field ) {
    ?>
    <tr>
      <td width="15%">
          
        <input type="text" class="cvqt-striweb" name="TitleItem[]" value="<?php if($field['TitleItem'] != '') echo esc_attr( $field['TitleItem'] ); ?>" />
</td> 
      <td width="70%">
     <input type="text" class="url-striweb" placeholder="Линк" name="TitleDescription[]" value="<?php if($field['TitleDescription'] != '') echo esc_attr( $field['TitleDescription'] ); ?>" /></td>
      <td width="15%"><a class="button remove-row" href="#">Премахни</a></td>
        
    </tr>
    <?php
    }
    else :
    // show a blank one
    ?>
    <tr>
      <td> 
        <input type="text" class="cvqt-striweb" title="Title" name="TitleItem[]" />
</td>
      <td> <input type="text" class="url-striweb" placeholder="TitleDescription" title="Description" name="TitleDescription[]" />
          </td>
      <td><a class="button cmb-remove-row-button button-disabled" href="#">Премахни</a></td>
    </tr>
    <?php endif; ?>

    <!-- empty hidden one for jQuery -->
    <tr class="empty-row screen-reader-text">
      <td>
        <input type="text" class="cvqt-striweb" name="TitleItem[]"/>
</td>
      <td>
          <input type="text" class="url-striweb" placeholder="Линк" name="TitleDescription[]" />
          </td>
      <td><a class="button remove-row" href="#">Премахни</a></td>
    </tr>
  </tbody>
</table>
<p><a id="add-row" class="button" href="#">Добави ред</a></p>
 <?php
}

add_action('save_post', 'custom_repeatable_meta_box_save');
function custom_repeatable_meta_box_save($post_id) {
    if ( ! isset( $_POST['striweb_repeatable_meta_box_nonce'] ) ||
    ! wp_verify_nonce( $_POST['striweb_repeatable_meta_box_nonce'], 'striweb_repeatable_meta_box_nonce' ) )
        return;

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
        return;

    if (!current_user_can('edit_post', $post_id))
        return;

    $old = get_post_meta($post_id, 'connected_products', true);
    $new = array();
    $invoiceItems = $_POST['TitleItem'];
    $prices = $_POST['TitleDescription'];
     $count = count( $invoiceItems );
     for ( $i = 0; $i < $count; $i++ ) {
        if ( $invoiceItems[$i] != '' ) :
            $new[$i]['TitleItem'] = stripslashes( strip_tags( $invoiceItems[$i] ) );
             $new[$i]['TitleDescription'] = stripslashes( $prices[$i] ); // and however you want to sanitize
        endif;
    }
    if ( !empty( $new ) && $new != $old )
        update_post_meta( $post_id, 'connected_products', $new );
    elseif ( empty($new) && $old )
        delete_post_meta( $post_id, 'connected_products', $old );


}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source