title: Wordpress PHP - Two values from a theme option
body: <p>I've been working on this for a while now, and have not been able to find an answer anywhere else online.</p>
  
  <p>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.</p>
  
  <p>Here is what it looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/0fTiN.png" alt="Theme Options Example"></p>
  
  <p>All my textarea options are put into an array, and I can call them at any time.</p>
  
  <p>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. </p>
  
  <p>I have a feeling this is just something so simple that I havent thought of yet. If not, please let me know.</p>
  
  <p>Here is github of the options panel: <a href="https://github.com/leemason/NHP-Theme-Options-Framework" rel="nofollow noreferrer">https://github.com/leemason/NHP-Theme-Options-Framework</a></p>
  
  <p>Below is the code I have been working on:</p>
  
  <p>This code is in a new file called <code>field_multi_textarea.php</code> that I have added to a new folder called <code>multi_text</code> inside the <code>fields</code> directory in the the options folder.</p>
  
  <pre><code>&lt;?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-&gt;sections, $parent-&gt;args, $parent-&gt;extra_tabs);
          $this-&gt;field = $field;
          $this-&gt;value = $value;
          //$this-&gt;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-&gt;field['class']))?$this-&gt;field['class']:'large-text';
  
          echo '&lt;ul id="'.$this-&gt;field['id'].'-ul"&gt;';
  
          if(isset($this-&gt;value) &amp;&amp; is_array($this-&gt;value)){
              foreach($this-&gt;value as $k =&gt; $value){
                  if($value != ''){
  
                      echo '&lt;li&gt;&lt;div class="fadeout"&gt;&lt;textarea id="'.$this-&gt;field['id'].'-'.$k.'" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][]" rows="6" class="'.$class.'" /&gt;'.esc_attr($value).'&lt;/textarea&gt;&lt;/div&gt; &lt;a href="javascript:void(0);" class="nhp-opts-multi-textarea-remove"&gt;'.__('Remove', 'nhp-opts').'&lt;/a&gt;&lt;/li&gt;';
  
                  }//if
  
              }//foreach
          }else{
  
              echo '&lt;li&gt;&lt;div class="fadeout"&gt;&lt;textarea id="'.$this-&gt;field['id'].'" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][]" rows="6" value="'.$this-&gt;field['std'].'" class="'.$class.'" /&gt;'.esc_attr($value).'&lt;/textarea&gt;&lt;/div&gt; &lt;a href="javascript:void(0);" class="nhp-opts-multi-textarea-remove"&gt;'.__('Remove', 'nhp-opts').'&lt;/a&gt;&lt;/li&gt;';
  
          }//if
  
          echo '&lt;li style="display:none;"&gt;&lt;div class="fadeout"&gt;&lt;textarea id="'.$this-&gt;field['id'].'" name="" rows="6" class="'.$class.'" /&gt;&lt;/textarea&gt;&lt;/div&gt; &lt;a href="javascript:void(0);" class="nhp-opts-multi-textarea-remove"&gt;'.__('Remove', 'nhp-opts').'&lt;/a&gt;&lt;/li&gt;';
  
          echo '&lt;/ul&gt;';
  
          echo '&lt;a href="javascript:void(0);" class="nhp-opts-multi-textarea-add" rel-id="'.$this-&gt;field['id'].'-ul" rel-name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][]"&gt;'.__('Add More', 'nhp-opts').'&lt;/a&gt;&lt;br/&gt;';
  
          echo (isset($this-&gt;field['desc']) &amp;&amp; !empty($this-&gt;field['desc']))?' &lt;span class="description"&gt;'.$this-&gt;field['desc'].'&lt;/span&gt;':'';
  
      }//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
  ?&gt;
  </code></pre>
  
  <p>This is the js that I have named <code>field_multi_textarea.js</code> and placed inside the <code>multi_text</code> folder.</p>
  
  <pre><code>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'));
      });
  
  });
  </code></pre>
  
  <p>I am calling for this function in the NHP-options.php like this:</p>
  
  <pre><code>array(
      'id' =&gt; 'cf_emailaddress2',
      'type' =&gt; 'multi_textarea',
      'title' =&gt; __('Contact Form Email Address', 'nhp-opts'),
      'sub_desc' =&gt; __('To add more, click add more', 'nhp-opts'),
      'et_url' =&gt; 'myurl',
      'std' =&gt; get_bloginfo('admin_email') ."",
      'desc' =&gt; __('Contact Form Email Address, This is where the form will be sent to.', 'nhp-opts')
      ),
  </code></pre>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/Rf3xX.png" alt="enter image description here"></p>
  
  <p>any help would be greatly appreciated. Thanks</p>