Your selector syntax is wrong it should be '.cat , .examScore' if you need to use multiple classes in same event. Then , you can check if the cat or examscore values are not empty depending on this get value typed by user or take 0 then set your values in your required inputs.

Demo Code :

//use comma 
$('#marks').on('input', '.cat , .examScore', function() {
  var $mark = $(this)
  $row = $mark.closest('tr')
  //check if the value is not "" else use 0
  var examScore = $row.find('.examScore').val() != "" ? $row.find('.examScore').val() : 0;
  var cat = $row.find('.cat').val() != "" ? $row.find('.cat').val() : 0;
  //declare variables
  var $studTotalScore = $row.find('.totScore')
  studTotalScore = parseInt(cat) + parseInt(examScore);
  $studTotalScore.val(studTotalScore).attr('readonly', true);
  var $studentgrade = $row.find('.grade')
  var $remarks = $row.find('.remark')
  var calculatedgrade, remark;
  if (studTotalScore >= 90 &&
    studTotalScore <= 100) {
    calculatedgrade = "A";
    remark = "Excellent";
  }
  $studentgrade.val(calculatedgrade).attr('readonly', true);
  $remarks.val(remark).attr('readonly', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="adv-table padTable">
  <table id="marks" class="table table-bordered" id="hidden-table-info">
    <caption>
      <h3 style="text-align: center;">RESULT SHEET</h3>
    </caption>
    <thead>
      <tr>
        <th>SN</th>
        <th width="40%">Student Name</th>
        <th>CAT</th>
        <th>Exam Score</th>
        <th>Total Score</th>
        <th>Grade</th>
        <th>Remark</th>
        <th>Position</th>

      </tr>
    </thead>

    <tbody>
      <form action="'. htmlspecialchars($_SERVER['PHP_SELF']).' " method="post" class="style-form" enctype="multipart/form-data">
        <tr>
          <td>1<input type="text" value="1" hidden="" name="studId"></td>
          <td><input type="text" class="form-control form-control-inline input-medium " value="s s" readonly=""></td>
          <td>
            <div class="form-group">

              <input type="number" class="form-control form-control-inline input-medium cat" id="cat" name="cat">
          </td>

          <td>
            <input type="number" class="form-control form-control-inline input-medium examScore" name="examScore">
          </td>

          <td>
            <input type="text" class="form-control form-control-inline input-medium totScore" id="totScore" name="totScore" readonly="">
          </td>
          <td>
            <input type="text" class="form-control form-control-inline input-medium grade" name="grade" readonly="">
          </td>
          <td>
            <input type="text" class="form-control form-control-inline input-medium remark" name="remark" readonly="">
          </td>
          <td>
            <input type="text" class="form-control form-control-inline input-medium position" name="position" readonly="">

          </td>


        </tr>
        <tr>
          <td>1<input type="text" value="2" hidden="" name="studId"></td>
          <td><input type="text" class="form-control form-control-inline input-medium " value="ss ss" readonly=""></td>
          <td>
            <div class="form-group">

              <input type="number" class="form-control form-control-inline input-medium cat" name="cat">
          </td>

          <td>
            <input type="number" class="form-control form-control-inline input-medium examScore" name="examScore">
          </td>

          <td>
            <input type="text" class="form-control form-control-inline input-medium totScore" name="totScore" readonly="">
          </td>
          <td>
            <input type="text" class="form-control form-control-inline input-medium grade" name="grade" readonly="">
          </td>
          <td>
            <input type="text" class="form-control form-control-inline input-medium remark" name="remark" readonly="">
          </td>
          <td>
            <input type="text" class="form-control form-control-inline input-medium position" name="position" readonly="">

          </td>


        </tr>
      </form>
    </tbody>
  </table>

I’m new in jQuery. I want the user to enter the CAT score and the EXAM score to get Total score, Grade, Remark and Position. The result to be displayed should be dependent on the addition of both CAT and EXAM score. Like once the user is enters the cat score and the exam score, the script should be able to add both, then display the total, the grade which could be A, B, …, Remark and the position of the student based on the already entered scores.
Any help will be really appreciated. Thanks in advance!

$sql=mysqli_query($conn, "SELECT * from students where class='$classId'");
echo '
<div  class="adv-table padTable">
          <table id="marks"  class="table table-bordered" id="hidden-table-info">
            <caption><h3 style="text-align: center;">RESULT SHEET</h3></caption>
             <thead>
              <tr>
                <th>SN</th>
                <th width="40%">Student Name</th>
                <th>CAT</th>
                <th>Exam Score</th>
                <th>Total Score</th>
                <th>Grade</th>
                <th>Remark</th>
                <th>Position</th>
                
              </tr>
            </thead>

<tbody>';

$sn=0;
while ($res=mysqli_fetch_array($sql)) {
    echo  '<form action="'. htmlspecialchars($_SERVER['PHP_SELF']).' " method="post" class="style-form" enctype="multipart/form-data">
    <tr>
    <td>'.++$sn.'<input type="text" value="'.$res['id'].'" hidden="" name="studId"></td>
    <td><input type="text" class="form-control form-control-inline input-medium " value="'.$res['surname'].'&nbsp;&nbsp;&nbsp;'. $res['othernames'].'" readonly=""></td>
    <td> 
      <div class="form-group">
    
        <input type="number" class="form-control form-control-inline input-medium cat" id="cat" name="cat" onkeypress="return (event.charCode == 8 || event.charCode==0)? null: event.charCode >=48 && event.charCode <=57">
        </td>
        
        <td>
        <input type="number" class="form-control form-control-inline input-medium examScore" id="examScore" name="examScore"  onkeypress="return (event.charCode == 8 || event.charCode==0)? null: event.charCode >=48 && event.charCode <=57" >
        </td>
        
         <td>
        <input type="text" class="form-control form-control-inline input-medium totScore" id="totScore" name="totScore"  readonly="">
        </td>
        <td>
        <input type="text" class="form-control form-control-inline input-medium grade" id="grade" name="grade"  readonly="">
        </td>
        <td>
        <input type="text" class="form-control form-control-inline input-medium remark" id="remark" name="remark"  readonly="">
        </td>
        <td>
     <input type="text" class="form-control form-control-inline input-medium position" id="position" name="position" readonly=""  >
     
            </td>     
              </div>
          </div>

    
    </tr>
    </form>' ;

JQUERY CODE

$('#marks').on('input', '.cat', '.examScore', function() {
    var examScore = (".examScore").val();
    $mark = $(this)
    var cat = $mark.val();
    total
    field
    $row = $mark.closest('tr')
    $studTotalScore = $row.find('.totScore')
    studTotalScore = parseInt(cat) + parseInt(examScore);

    $studTotalScore.val(studTotalScore).attr('readonly', true);

    $studTotalScore.val(studTotalScore).attr('readonly', true);
    $studentgrade = $row.find('.grade')
    $remarks = $row.find('.remark')
    if (studTotalScore >= 90 && studTotalScore <= 100) {
        calculatedgrade = "A";
        remark = "Excellent";
    }

    $studentgrade.val(calculatedgrade).attr('readonly', true);

    $remarks.val(remark).attr('readonly', true);
});