edit button variable missing in ajax/js form

The variables to note are title and category_description. For context here is my Add feature, both values are correct since it adds to my table.

My problem is my edit button, it shows the title data but not the category_description. As seen in the screenshot, my description column has a value.

AJAX

$('#addCategory').on('shown.bs.modal', function(e) {
  var id = $(e.relatedTarget).data('id');
  //    var category_id           =   $(e.relatedTarget).data('id');
  var title = $(e.relatedTarget).data('title');
  var category_description = $(e.relatedTarget).data('category_description');
  //    var category_description_2  =   $(e.relatedTarget).data('category_description');
  var action = $(e.relatedTarget).data('action');

  if (action !== undefined) {

    if (action === "edit") {
      $("#title").removeAttr("readonly");
      $("#category_description").removeAttr("readonly");

      // set modal title
      $(".modal-title").html("Update Category");

      $("#createBtn").text("Update");

      // pass data to input fields
      $("#id_hidden").val(id);
      $("#title").val(title);
      $("#category_description").val(category_description);
      // hide button
      $("#createBtn").removeClass("d-none");
    }
  } else {
    $(".modal-title").html("Add Category");

    // pass data to input fields
    $("#title").removeAttr("readonly");
    $("#title").val("");

    $("#category_description").removeAttr("readonly");
    $("#category_description").val("");

    // hide button
    $("#createBtn").removeClass("d-none");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="undefined" crossorigin="anonymous"></script>
<div class="modal fade" id="addCategory" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">

    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-center font-weight-bold"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true"> × </span>
              </button>
      </div>

      <div class="modal-body">
        <form method="POST" id="postForm">
          <input type="hidden" id="id_hidden" name="id" />
          <div class="form-group">
            <label for="title"> Title <span class="text-danger">*</span></label>
            <input type="text" name="title" id="title" class="form-control">
          </div>

          <div class="form-group">
            <label for="title"> Description <span class="text-danger">*</span></label>
            <textarea name="category_description" id="category_description" class="form-control"></textarea>
          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button type="submit" id="createBtn" class="btn btn-primary"> Save </button>
      </div>

      <div class="result"></div>

    </div>
  </div>
</div>

as you can see from these lines:

$("#title").val(title);
$("#category_description").val(category_description);

both variables are being declared but only the title shows up. What seems to be missing? any help would be appreciated.