only last option from theme options is being saved to the DB

I solve it as follows:

1- regester_setting() id should not match any other Id, and this is the Id you have to
use in the callback function.

2- you don’t need to use add_setting_field() id in any place.

3- put all sections in one option group.

4- the page inside add_settings_section() and add_setting_field() should match the page slug that being rendered by add_menu_page() or add_submenu_page().

so the code now as follows:

adding options to admin page:

change: deleted every group options, only one saved and added to every regester_settings(). changed the page slug to match page on the add_settings_field().

    add_submenu_page('top', 'top', 'top', 'manage_options', 'top-data', 'top_init' );


 register_setting( 'top-data-group', 'yourLogo');
 register_setting( 'top-data-group', 'card1_text');
 register_setting( 'top-data-group', 'card4_text');


  add_settings_section('top-options', 'Top Information', 'top_options', 'top-data' );
  add_settings_section('card1', 'Card 1', 'card1_options', 'top-data' );
  add_settings_section('card4', 'Card 4', 'top_options', 'top-data' );


 add_settings_field('random3', 'Logo Image URL:', 'yourLogoImage_callback', 'top-data', 'top-options'  );
 add_settings_field('crandom1', 'card 1 text:', 'card1_text_callback', 'top-data', 'card1'  );
 add_settings_field('random2', 'card 4 text:', 'card4_text_callback', 'top-data', 'card4'  );

callback functions:

change: changed get_options() an name= properties to match ids on the regester_settings()

function card1_text_callback (){
    $preText =  esc_attr( get_option('card1_text'));
     echo ' <input type="text" name="card1_text" placeholder="card text" size="50" value="'.$preText. '" > ';
 }


function card4_text_callback (){
    $preText =  esc_attr( get_option('card4_text'));
     echo ' <input type="text" name="card4_text" placeholder="card text" size="50" value="'.$preText. '" > ';
 }

function yourLogoImage_callback (){
    $preText =  esc_attr( get_option('yourLogo'));
     echo ' <input type="text" name="yourLogoImage" placeholder="your Logo Image URL" size="50" value="'.$preText. '" > <p> use external or internal image url , preferred (300 * 50 px) </p>'   ;
 }

the form page:

change: delete every group option, only one saved.

<h1> Top Section </h1>
<?php settings_errors(); ?>


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


    settings_fields('top-data-group');
    do_settings_sections('top-data');



    submit_button('save', 'primary sub-button', 'submit', true);

  ?>
</form>