I was able to fetch a table from the database using the following code and display it in front-end using the shortcode

// function that runs when shortcode is called
function karnameh_tb() { 
$period = $_GET['period'];
global $wpdb;

// Getting current user logged in.
$current_user = wp_get_current_user();
// Get user Email to use in meta function.
$user_id = $current_user->user_email;
$query = $wpdb->get_results("SELECT * FROM wp_table_5 WHERE email="$user_id" and period ='$periodd' limit 1");

$queryy = $wpdb->get_results("SELECT period FROM wp_table_5 WHERE email="$user_id"");

 echo"<select class="form-control period" name="period">
        <option>select period</option>";
                        foreach($queryy as $key => $value){ 
                          echo"<option value="$value->period">".$value->period."</option>";
                        }
echo"</select>";
echo "<table id='kar'>";
foreach($query as $row)
{
    
            echo"<thead>
                <tr class="">
                    <th colspan='8' class="">period  ".$row->period."</th>
                </tr>
        </thead>";

    echo"<tr class=""><td colspan='8' class="">info</td></tr>
        <tr class="">
            <td class="">name</td>
            <td class="">per</td>
            <td class="">ext</td>
            <td colspan='2' rowspan='1' class="">email</td>
            <td class="">sem</td>
            <td class="">team</td>
            <td class="">shift</td>
        </tr>
        <tr>
            <td>".$row->fullname."</td>
            <td>".$row->personnelid."</td>
            <td>".$row->extension."</td>
            <td colspan='2' rowspan='1'>".$row->email."</td>
            <td>".$row->position."</td>
            <td>".$row->teams."</td>
            <td>".$row->shift."</td>
        </tr>";





}
echo "</table>";


}

// register shortcode
add_shortcode('karnameh', 'karnameh_tb');

Now I need to fetch the data using a condition and select the data in the drop-down list
The value inside the period drop-down list

<script>
jQuery(document).ready(function() { 
  jQuery(".period").click(function () {
   console.log('The function is hooked up');
   jQuery.ajax({
       type: "POST",
       url: "/wp-admin/admin-ajax.php",
       data: {
           action: 'karnameh_tb',
           // add your parameters here
           period: jQuery('.period').val()
       },
       success: function (output) {
          console.log(output);
       }
       });
   });
});
</script>

Thank you for your help. What else should I do and where is my mistake?