how to display custom table in wordpress with ajax when select list select

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?