form not clearing properly after submit and also for hidden input

Question

I'm using a parsley validator and somehow it affects my form. After submission, it won't clear all the inputs; especially hidden inputs. And when I tried to set some input value from javascript it won't show up.

I think it's because of my <form method="post" id="transaction_form">. I've tried to re-evaluate my HTML but still, it won't work properly.

$(document).ready(function () {
  $("#cust_num").val(55555);
  var exam_num = 12345;
  var prod_num = 88998;
  var prod_name = "Hello";
  var prod_price = 150000;

  var transactionTable = $("#transaction_table");
  var trxprodcount = 0;
  var subTotal = 0;
  var endTotal = 0;

  function clearinput() {
    $("#transaction_form")[0].reset();
    $("#transaction_form").parsley().reset();
    //$('#get_productdata').attr('disabled', 'disabled');
    $("#subtotal").html(0);
    $("#endtotal").html(0);
  }

  clearinput();

  function recount() {
    subTotal = transactionTable.DataTable().column(3).data().sum();
    $("#subtotal").html(subTotal);

    endTotal = subTotal - (subTotal * $("#trx_disc").val()) / 100;
    $("#endtotal").html(endTotal);
  }

  transactionTable.DataTable({
    ordering: false,
    responsive: true,
    searching: false,
    paging: false,
    info: false,
    fnRender: function (Obj) {
      return "Rp" + Obj.Data[3];
    },
    drawCallback: function () {
      recount();
    },
  });

  $("#trx_disc").on("change", function () {
    recount();
  });

  trxprodcount = trxprodcount + 1;
  var exam_num = $("#cust_num").val() + "S" + trxprodcount;
  var col_exam_num =
    exam_num +
    '<input type="hidden" name="hidden_exam_num[]" id="exam_num' +
    trxprodcount +
    '" class="exam_num" value="' +
    exam_num +
    '" />';
  var col_exam_prod =
    prod_num +
    '<input type="hidden" name="hidden_exam_prod[]" id="exam_prod' +
    trxprodcount +
    '" value="' +
    prod_num +
    '" />';
  var del_btn =
    '<button type="button" name="del_prodtrx" id="' +
    trxprodcount +
    '" class="btn btn-danger btn-sm del_prodtrx" >Delete</button>';
  transactionTable
    .DataTable()
    .row.add([col_exam_num, col_exam_prod, prod_name, prod_price, del_btn])
    .draw()
    .node();

  $("#transaction_table").on("click", ".del_prodtrx", function () {
    var row = $(this).parents("tr");

    if ($(row).hasClass("child")) {
      transactionTable.DataTable().row($(row).prev("tr")).remove().draw();
    } else {
      transactionTable.DataTable().row($(this).parents("tr")).remove().draw();
    }
  });

  $("#transaction_form").on("submit", function (event) {
    event.preventDefault();
    if ($("#transaction_form").parsley().isValid()) {
      var count_data = 0;
      $(".exam_num").each(function () {
        count_data = count_data + 1;
      });
      if (count_data > 0) {
        clearinput();
      } else {
        $("#message").html(
          '<div class="alert alert-danger">Customer/Product Kosong'
        );
      }
      setTimeout(function () {
        $("#message").html("");
      }, 3000);
    }
  });
});

Live Example: https://jsfiddle.net/azissofyanp/9p7j1d6u/30/

And I'm very confused about it.