WordPress Theme Options Values

I am designing a wordpress website with theme options:

In my theme options I have code that looks like this:

    $class = (isset($this->field['class']))?$this->field['class']:'regular-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><input type="text" id="'.$this->field['id'].'-'.$k.'" name="'.$this->args['opt_name'].'['.$this->field['id'].'][]" value="'.esc_attr($value).'" class="'.$class.'" /> <a href="javascript:void(0);" class="nhp-opts-multi-text-remove">'.__('Remove', 'nhp-opts').'</a></li>';

It displays a text field in my theme options panel, and I am able type in it and save it.

Here is my problem, I changed my code to add a text area with the options, and it looked something like this:

    $class = (isset($this->field['class']))?$this->field['class']:'regular-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><input type="text" id="'.$this->field['id'].'-'.$k.'" name="'.$this->args['opt_name'].'['.$this->field['id'].'][]" value="'.esc_attr($value).'" class="'.$class.'" /> <textaread id="'.$this->field['id'].'-'.$k.'" name="'.$this->args['opt_name'].'['.$this->field['id'].'][]" class="'.$class.'">'.esc_attr($value).'</textarea> <a href="javascript:void(0);" class="nhp-opts-multi-text-remove">'.__('Remove', 'nhp-opts').'</a></li>';

Now when I go to my theme options panel, both boxes are there, but if i type something different in each one and save it. Both boxes are displayed to showing the exact same thing. Is there a way I can fix this?