Ggtcf

I'm trying to create a multiple custom user profile fields to allow our users adding more software skills in their profile page.

The problem I'm facing is it always saving only one meta for "skills" and one meta for "skills_percent" even if I added more inputs!

What should I do to save all of them when I adding more fields?

And how to display all of them as well in the front end!

here what i have done.

<table class="skills-table">
 <tr>
 <th><label for="skills"><?php _e("Skills"); ?></label></th>
 <td>
 <div class="multi-field-wrapper">
 <button type="button" class="add-field">+</button> 
 <div class="multi-fields">
 <div class="multi-field">
 <input type="text" name="skills" id="skills" value="<?php echo esc_attr( get_the_author_meta( 'skills', $current_user->ID ) ); ?>" class="textbox" />
 <input type="text" name="skills_percent" id="skills_percent" value="<?php echo esc_attr( get_the_author_meta( 'skills_percent', $current_user->ID ) ); ?>" class="textbox" /><br />
 <button type="button" class="remove-field">-</button>
 </div>
 </div>
 </div>
 <span class="description"><?php _e("Please enter your programs or software in the first box and how many percent in the second box ."); ?></span>
 </td>
 </tr>
</table>

script for adding/removing fields dynamically.

<script type="text/javascript">
jQuery(document).ready(function($) 
$('.multi-field-wrapper').each(function() 
 var $wrapper = $('.multi-fields', this);
 $(".add-field", $(this)).click(function(e) 
 $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
 );
 $('.multi-field .remove-field', $wrapper).click(function() 
 if ($('.multi-field', $wrapper).length > 1)
 $(this).parent('.multi-field').remove();
 );
);
);
</script>

updating the user meta

if ( !empty( $_POST['skills'] ) )
 update_user_meta( $current_user->ID, 'skills', esc_attr( $_POST['skills'] ) );

if ( !empty( $_POST['skills_percent'] ) )
 update_user_meta( $current_user->ID, 'skills_percent', esc_attr( $_POST['skills_percent'] ) );

displaying the author meta in front end

<dt class="j-s-m">Skills</dt><dd class="text-intro"><?php echo get_the_author_meta('skills', $curauth->ID); ?> <?php echo get_the_author_meta('skills_percent', $curauth->ID); ?></dd>