Codeigniter + Ajax, can't submit form multiple times without page refresh

Question

I'm trying to do simple task in one page and avoiding page refresh on every form submit using ajax. The problem is I can only submit update to database one time and the rest is only console log success without updating database.

Controller

function index() {
 $data['process'] = $this->Debug_model->getProcess();
 $this->load->view('debug', $data);
}

function nextLine() {

 $this->form_validation->set_rules('id', 'ID', 'required');

 if ($this->form_validation->run() == FALSE)
 {
   redirect('debug','refresh');
 } else {
  $data = array(
      'currentLine' => $this->input->post('currentLine'),
      'nextLine' => $this->input->post('nextLine')
  );

  $id = $this->input->post('id');
  $this->Debug_model->goNext($data, $id);
 }
}

Model

function goNext($data, $id)
{
    $this->db->where('id', $id);
    return $this->db->update('tbl_process', $data);
}

Javascript

$(document).ready(function() {
            finish();
        });
        
        function finish() {
            setTimeout(function() {
                update();
                finish();
            }, 200);
        }
        
        function update() {
            $.getJSON("apitest", function(data) {
                $("#currentLine").empty();
                $("#nextLine").empty();
                $.each(data.result, function() {
                    $("#currentLine").append(
                        "" + this['currentLine'] + "-" + this['deskNo'] + ""
                    );
                    $("#nextLine").append(
                        "" + this['nextLine'] + "-" + this['deskNo'] + ""
                    );
                });
            });
        }

        //btn save
        $("#btnSave").click(function(e){
            e.preventDefault();
            var data = $('#callLine').serialize();
            $.ajax({
                type: 'POST',
                url: "<?php echo base_url('debug/nextLine'); ?>",
                data: data,
                success: function() {
                    console.log('success');
                }
            });
        });

View

<h1>Current: <span id="currentLine"></span></h1>
<h2>Next: <span id="nextLine"></span></h2>

<?php foreach ($process->result() as $singleProcess) : 
    $tobeCurrent = $singleProcess->currentLine + 1;
    $tobeNext = $tobeCurrent + 1;
?>
<form action="" method="post" enctype="multipart/form-data" id="callLine">
  <input type="hidden" name="id" value="<?php echo $singleProcess->id ?>" />
  <input type="hidden" name="currentLine" value="<?php echo $tobeCurrent ?>" />
  <input type="hidden" name="nextLine" value="<?php echo $tobeNext ?>" />
  <button id="btnSave" class="btn-a" type="btn">NEXT LINE</button>
</form>
<?php endforeach; ?>

The goal is no page refresh when submitting form and can be done multiple times, still without refreshing the page.

Answer 1

Instead of detecting the event on button click, detect it on the form submit event.

$("#callLine").submit(function(e){
            e.preventDefault();
            var data = $('#callLine').serialize();
            $.ajax({
                type: 'POST',
                url: "<?php echo base_url('debug/nextLine'); ?>",
                data: data,
                success: function() {
                    console.log('success');
                }
            });
        });

also change the button type to submit instead of btn

<button id="btnSave" class="btn-a" type="submit">NEXT LINE</button>