modal not working when use on click event

the button, use to click that pass direct to open in the modal

<button type="button" class="btn btn-primary waves-effect waves-light debit-btn" data-toggle="modal" data-animation="bounce" data-target=".bs-example-modal-center-dr"  data-account_id="" >Debit</button>

modal section, after button clicked the modal suppose to open and show the data

<div class="modal fade bs-example-modal-center-dr"  tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title mt-0" id="myLargeModalLabel">Add Debit</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">

Jquery and ajax, i use on click event to get the id and pass then to the ajax in order to return data from a controller

$(document).ready(function() {
        $('.debit-btn').on('click', function (){
            var account_id = $(this).data('account_id');
            //alert(account);
            $.ajax({
                url : "<?php echo base_url('Debtors_creditors_more_details/get_credit_trans');?>",
                method : "POST",
                data : {account_id: account_id},
                async : true,
                dataType : 'json',
                success: function(data){
                    //calculateQuantity(qty, data);
                    $('#model-debit').modal('show');
                    console.log(data);
                    alert('hello');
                }
            });
            return false;
        });
    });

Note:- This cant open a modal after adding on click function, please help

Answer

Your View:-

<td>
<input type="button" value="Debit" id="<?php echo $variable_name->account_id; ?>" class="btn btn-info debit_data" />
</td> 

Bootstrap Modal Code:-

<div id="dataModal" class="modal fade">  
      <div class="modal-dialog modal-xl">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">View Full Debit Details</h4>  
                </div>  
                <div class="modal-body" id="your_modal_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>

JQUERY AJAX Code:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>  
 $(document).ready(function(){  
  $('.debit_data').click(function(){  
       var account_id = $(this).attr("id");  
       $.ajax({  
            url : "<?php echo base_url('Debtors_creditors_more_details/get_credit_trans') ?>", 
            method:"POST",  
            data:{account_id:account_id},  
            success:function(data){
            //alert(data);  
             $('#your_modal_detail').html(data);  
             $('#dataModal').modal("show");  
            }  
       });  
  });  
 });  
</script>

Controller Code:-

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Debtors_creditors_more_details extends CI_Controller {

public function get_credit_trans(){
      $account_id = $this->input->post("account_id");
          
          $this->load->YourModelName();
          
 $data['account'] = $this->YourModelName->getDatainModal($account_id);
$this->load->view('accountinModal',$data);

  }
}
?>

Modal Code:-

<?php

class YourModelName extends CI_Model {

function getDatainModal($account_id){

        return $account = $this->db->get_where('table_name',array('account_id'=>$account_id))->row_array(); 
        }   
}
?>

Create in View accountinModal.php :-

<div class="table-responsive">
 <table class="table table-bordered"> 

    <div class='row col-md-12'>
     <div class='col-md-6'>
           <tr>
             <td width="30%"><label>Acount Id</label></td>  
             <td width="70%"><?php echo $account["account_id"];?></td>  
          </tr> 
        </div>
  <div class='col-md-6'>       
          <tr>
             <td width="30%"><label>Acount Name</label></td>  
             <td width="70%"><?php echo $account["account_name"];?></td>  
          </tr>
       </div>   
       </div>

</table>
</div>