文本框不保存在wordpress主题设置中

I am creating a wordpress theme with theme options in wordpress. I like to add a dynamic add and remove textbox using jquery inside the theme settings page. My query is,

theme_settings.php

   <?php
function theme_settings_init(){
    register_setting( 'theme_settings', 'theme_settings' );
}

function add_settings_page() {
add_menu_page( __( 'Theme Settings' ), __( 'Theme Settings' ), 'manage_options', 'settings', 'theme_settings_page');
}

//add actions
add_action( 'admin_init', 'theme_settings_init' );
add_action( 'admin_menu', 'add_settings_page' );

//start settings page
function theme_settings_page() {

if ( ! isset( $_REQUEST['updated'] ) )
$_REQUEST['updated'] = false;

?>

<div>

<div id="icon-options-general"></div>
<h2><?php _e( 'Theme Settings' ) //your admin panel title ?></h2>

<?php
//show saved options message
if ( false !== $_REQUEST['updated'] ) : ?>
<div><p><strong><?php _e( 'Options saved' ); ?></strong></p></div>
<?php endif; ?>

<form method="post" action="options.php">

<?php settings_fields( 'theme_settings' ); ?>
<?php $options = get_option( 'theme_settings' ); ?>

<div id='TextBoxesGroup'>
        <?php
    $counter = 1;
    while (get_option('textbox'.$counter) && $counter <= 10) {
      echo '<div id="TextBoxDiv'.$counter.'">
        <input type="textbox" id="theme_settings[textbox'.$counter.'] name="theme_settings[textbox'.$counter.']" >
        </div>';
      $counter++;
    }
        ?>
    </div>
    <input type='button' value='Add Button' id='addButton'>
    <input type='button' value='Remove Button' id='removeButton'>


<p><input name="submit" id="submit" value="Save Changes" type="submit"></p>
</form>


</div><!-- END wrap -->
<?php
}

and my javascript file is:

 $(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {

    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    $('<div id="TextBoxDiv'+counter+'"></div>').append(
'<input type="text" name="theme_settings[textbox' + counter + 
']" id="theme_settings[textbox' + counter + ']" value="" >').appendTo('#TextBoxesGroup');

    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
     });

     $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

        $("#TextBoxDiv" + counter).remove();

     });

     $("#getButtonValue").click(function () {

    var msg = '';
    for(i=1; i<counter; i++){
      msg += "
 Textbox #" + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
     });
  });

Now my question is, In the theme settings page, the add action and remove action works very fine but while saving the theme setting options the added textbox dissappears. It happens while refreshing the page too. Please anyone help me how to keep those added textbox remains same if saving the theme options page.

Use .append() instead of .after().html(). This way your code goes inside the corresponding div element. I made use of jQuery also.

newTextBoxDiv.after().html(
'<input type="text" name="theme_settings[textbox' + counter + 
']" id="theme_settings[textbox' + counter + ']" value="" >');

should be

$('<div id="TextBoxDiv'+counter+'"></div>').append(
'<input type="text" name="theme_settings[textbox' + counter + 
']" id="theme_settings[textbox' + counter + ']" value="" >').appendTo('#TextBoxesGroup');

To make the text boxes appear you need a while loop like this:

$counter = 1;
while (get_option('textbox'.$counter) && $counter <= 10) {
  echo '<div id="TextBoxDiv'.$counter.'">
    <input type="textbox" id="theme_settings[textbox'.$counter.'] name="theme_settings[textbox'.$counter.']" >
    </div>';
  $counter++;
}

When you save them you could do this:

$counter = 0;
while (isset($_POST['theme_settings']['textbox'.$counter']) && $counter <= 10) {
  update_option('textbox'.$counter, $_POST['theme_settings']['textbox'.$counter']);
  $counter++;
}
// now remove the rest of them if they were previously set
// for example we now set only 5 of them and there were 10 before
// continue with counter from where we left in the previous while loop
while ($counter <= 10) {
  update_option('textbox'.$counter, false);
  $counter++;
}

EDIT:

function theme_settings_page() {
  $updated = false;

  if (isset($_REQUEST['updated'])) {
    update_option('theme_settings', $_POST['theme_settings']);
    $updated = true;
  }

  // ....

  if ($updated) {
    echo '<div><p><strong>';
      _e( 'Options saved' );
    echo '</strong></p></div>';
  }

  $counter = 1;
  $options = get_option('theme_settings');
  while (isset($options['textbox'.$counter])) {
    echo '<div id="TextBoxDiv'.$counter.'">
        <input type="textbox" id="theme_settings[textbox'.$counter.'] name="theme_settings[textbox'.$counter.']" value="'.$options['textbox'.$counter].'" />
        </div>';
    $counter++;
  }

  echo '<input type="hidden" name="updated" value="1" />';

  // the rest of your form
}