WordPress PHP – Two values from a theme option

I’ve been working on this for a while now, and have not been able to find an answer anywhere else online.

In my options panel of wordpress, I have an textarea that I can type in, and if I want to add another textarea, I just click to add and remove them.

Here is what it looks like:

All my textarea options are put into an array, and I can call them at any time.

What I want to do, and have been trying to figure out for a while now is this:
I want to be able to add a text input below each one of the textareas, and whenever I update it, it put each of the text inputs into an array.

I have a feeling this is just something so simple that I havent thought of yet. If not, please let me know.

Here is github of the options panel: https://github.com/leemason/NHP-Theme-Options-Framework

Below is the code I have been working on:

This code is in a new file called field_multi_textarea.php that I have added to a new folder called multi_text inside the fields directory in the the options folder.

<?php
class NHP_Options_multi_textarea extends NHP_Options{   

    /**
     * Field Constructor.
     *
     * Required - must call the parent constructor, then assign field and value to vars, and obviously call the render field function
     *
     * @since NHP_Options 1.0.5
    */
    function __construct($field = array(), $value ='', $parent){

        parent::__construct($parent->sections, $parent->args, $parent->extra_tabs);
        $this->field = $field;
        $this->value = $value;
        //$this->render();

    }//function



    /**
     * Field Render Function.
     *
     * Takes the vars and outputs the HTML for the field in the settings
     *
     * @since NHP_Options 1.0.5
    */
    function render(){

        $class = (isset($this->field['class']))?$this->field['class']:'large-text';

        echo '<ul id="'.$this->field['id'].'-ul">';

        if(isset($this->value) && is_array($this->value)){
            foreach($this->value as $k => $value){
                if($value != ''){

                    echo '<li><div class="fadeout"><textarea id="'.$this->field['id'].'-'.$k.'" name="'.$this->args['opt_name'].'['.$this->field['id'].'][]" rows="6" class="'.$class.'" />'.esc_attr($value).'</textarea></div> <a href="javascript:void(0);" class="nhp-opts-multi-textarea-remove">'.__('Remove', 'nhp-opts').'</a></li>';

                }//if

            }//foreach
        }else{

            echo '<li><div class="fadeout"><textarea id="'.$this->field['id'].'" name="'.$this->args['opt_name'].'['.$this->field['id'].'][]" rows="6" value="'.$this->field['std'].'" class="'.$class.'" />'.esc_attr($value).'</textarea></div> <a href="javascript:void(0);" class="nhp-opts-multi-textarea-remove">'.__('Remove', 'nhp-opts').'</a></li>';

        }//if

        echo '<li style="display:none;"><div class="fadeout"><textarea id="'.$this->field['id'].'" name="" rows="6" class="'.$class.'" /></textarea></div> <a href="javascript:void(0);" class="nhp-opts-multi-textarea-remove">'.__('Remove', 'nhp-opts').'</a></li>';

        echo '</ul>';

        echo '<a href="javascript:void(0);" class="nhp-opts-multi-textarea-add" rel-id="'.$this->field['id'].'-ul" rel-name="'.$this->args['opt_name'].'['.$this->field['id'].'][]">'.__('Add More', 'nhp-opts').'</a><br/>';

        echo (isset($this->field['desc']) && !empty($this->field['desc']))?' <span class="description">'.$this->field['desc'].'</span>':'';

    }//function


    /**
     * Enqueue Function.
     *
     * If this field requires any scripts, or css define this function and register/enqueue the scripts/css
     *
     * @since NHP_Options 1.0.5
    */
    function enqueue(){

        wp_enqueue_script(
            'nhp-opts-field-multi-textarea-js', 
            NHP_OPTIONS_URL.'fields/multi_textarea/field_multi_textarea.js', 
            array('jquery'),
            time(),
            true
        );

    }//function

}//class
?>

This is the js that I have named field_multi_textarea.js and placed inside the multi_text folder.

jQuery(document).ready(function(){

    jQuery('.nhp-opts-multi-textarea-remove').live('click', function(){
        jQuery(this).prev('.fadeout').val('');
        jQuery(this).parent().fadeOut('slow', function(){jQuery(this).remove();});
    });

    jQuery('.nhp-opts-multi-textarea-add').click(function(){
        var new_input = jQuery('#'+jQuery(this).attr('rel-id')+' li:last-child').clone();
        jQuery('#'+jQuery(this).attr('rel-id')).append(new_input);
        jQuery('#'+jQuery(this).attr('rel-id')+' li:last-child').removeAttr('style');
        jQuery('#'+jQuery(this).attr('rel-id')+' li:last-child textarea').val('');
        jQuery('#'+jQuery(this).attr('rel-id')+' li:last-child textarea').attr('name' , jQuery(this).attr('rel-name'));
    });

});

I am calling for this function in the NHP-options.php like this:

array(
    'id' => 'cf_emailaddress2',
    'type' => 'multi_textarea',
    'title' => __('Contact Form Email Address', 'nhp-opts'),
    'sub_desc' => __('To add more, click add more', 'nhp-opts'),
    'et_url' => 'myurl',
    'std' => get_bloginfo('admin_email') ."",
    'desc' => __('Contact Form Email Address, This is where the form will be sent to.', 'nhp-opts')
    ),

I can the make input look like the image below, but its value doesnt save, or it is identical to whatever is in the textarea.

any help would be greatly appreciated. Thanks