Populating an input type text field, according to previous dropdown selection in form using php & ajax

As the title says, I am trying to populate a text input according to a dynamic drop down list, but I can not get it to work. Below is my form:

<div class="form-group">
    <label for="mealcategorytype"" class="col-12 col-form-label">Meal Category </label>
        <div class="col-12">
           <select class="form-control " name="categ_type" id="mealcategorytype">
            <option  value='' disabled selected>Select Meal Category...</option>
             <?php
               require_once '_db.php';                                         
               $stmt= $db->prepare("SELECT * FROM `rate_type_categories`");                                        
               $stmt->execute();
               $values=$stmt->fetchAll();  
                                                                                               
               foreach($values as $value)
               {                                                
                if($value['rate_type_category_id']==$rowCatRatePlan['rate_type_category_id'])
                {
                 echo 
                '<option selected value="'.$value['rate_type_category_id'].'">'.$value['rate_type_category_name'].'</option>';
                }
                else
                {
                 echo '<option value="'.$value['rate_type_category_id'].'">'.$value['rate_type_category_name'].'</option>';
                }
              }  ?>                 
          </select>
        </div>
   </div>


   <div class="form-group ">
     <label for="example-date-input" class="col-12 col-form-label">Rate Plan Charge Percentage</label>
    <div class="col-12">
     <input class="form-control"  id="ratepercent" name='rate_percentage' type="text" value=''>
    </div>
   </div>

By selecting the required rate type category (you will see it as meal category also in my code ), I want to populate the the next field ( Rate Plan Charge Percentage ) with the selected category's Rate Plan Charge Percentage from the database.

rate type category table in link:

enter image description here

this is the script that I tried using :

$(document).ready(function(){  
      $('#mealcategorytype').change(function(){  
           var mealCategory_id = $(this).val();  
           alert($this);
           $.ajax({  
                url:"match_meal_category_to_rate_plan.php",  
                method:"POST",  
                data:{mealCategoryID:mealCategory_id},  
                success:function(data){  
                     $('#ratepercent').val(data);  
                     //$('#ratedocdesc').html(data);  
                     
                }  
           });  
      });  
 });  

and the code in the page where the ajax request will be sent :

$output='';
$getMealCategContent="SELECT * FROM rate_type_categories WHERE rate_type_category_id  = '".$_POST['mealCategoryID']."'  ";
echo $getMealCategContent;
$resultMealCategContent=mysqli_query($conn,$getMealCategContent);

while($rowCategContent=mysqli_fetch_array($resultMealCategContent))
{
  $output.='        
  <input class="form-control"  id="ratepercent" name="rate_percentage" type="text" value="'.$rowCategContent["rate_category_charge_percentage"].'"> ';
}                                 
echo $output;

What am I doing wrong?

source https://stackoverflow.com/questions/68967133/populating-an-input-type-text-field-according-to-previous-dropdown-selection-in