passing button’s ID to my modal’s textbox

newbie here. I have an insert function and it works fine. However, what I am trying to accomplish more is to pass my button’s eventID value to my modal’s input type textbox. Any help will be appreciated. I provided the codes below, more explanations, and a screenshot. Thank you and have a good day.

enter image description here

View:

  <div class="modal fade" id="createModall" role="dialog">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h3 class="modal-title"></h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         </div>
         <div class="modal-body">
      
             <form id="insertParticipant">
                              <div class="form-group">
                                    
                                 <input type="number"  name="eventID" id="eventID" value="Pass the button's eventID value here"/> 
                                 </div>
                                 <div class="form-group">
                                    <label for="description">Entry Number</label>
                                    <input type="number" class="form-control" id="entry number"  name="entryID" value="<?php echo $last_id ?>" readonly placeholder="">
                                 </div>
                                 <div class="form-group">
                                    <label for="description">Entry Name</label>
                                    <input type="text" class="form-control" id="entryName" name="entryName" placeholder="" >
                                 </div>
                                 <div class="form-group">
                                    <label for="description">Owner/Financier</label>
                                    <input type="text" class="form-control" id="owner" name="owner" placeholder="" >
                                 </div>
                                 <div class="form-group">
                                    <label for="description">No Fights</label>
                                    <input type="number" class="form-control" id="noOfFight" name="noOfFight" placeholder="">
                                 </div>
                                 <div class="form-group">
                                    <label for="description">Score/Level</label>
                                    <input type="number" class="form-control" id="score" name="score" placeholder="" >
                                 </div>
            <!--                     tapos ng add entries -->
            <!-- dito ung table -->
           <div class="card card-danger card-outline" style="width: 100%;">
    <div class="card-header">
        <div class="stag">
            <center> &nbsp; STAG/COCK ENTRY DETAILS</center>
        </div>
    </div>
    <div class="card-body table-responsive " style="display: inline-block;">
        <table class="table table-bordered" border="1" id="applicanttable">
            <thead>
                <tr>
                </tr>
            </thead>
            <tbody>
                <div class="row">
           <tr>
              <th>#</th>
              <th>LB#</th>
              <th>Weight#</th>
              <th>Wingband #</th>
              <th>Action</th>
           </tr>
           <tr id="row_0">
              <td>
                 <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
              </td>
              <td class="labelcell">
                 <input id="lightBand" name="lightBand1" type="number" value="" class="auto"/>
              </td>
              <td class="labelcell">
                 <input id="weight" name="weight1" type="number" />
              </td>
              <td class="labelcell">
                 <input id="wingBand" name="wingBand1" type="number" />
              </td>
              <td class="labelcell">
                 <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
              </td>
           </tr>
        </div>
     </tbody>
     </div>
     <tfoot>
       <tr>
       </tr>
       <tr>
       <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
       </tr>
      </tfoot>                                        
 </table>
                                    </div>
                           </div>
                           <button type="submit" class="btn btn-danger">Submit</button>
                           </ol>
                        </div>
                        </form>
      </div>
</div> // please ignore the missing divs. :(( thank you

Ajax

// This is my insert function using ajax


<script type="text/javascript">

   $("#insertParticipant").submit(function(event) {
    event.preventDefault();
    $.ajax({
               url: "<?php echo base_url('transaction/createParticipant');  ?>",
               data: $("#insertParticipant").serialize(),
               type: "post",
               async: false,
               dataType: 'json',
               success: function(response){
                 
             
                   $('#insertParticipant')[0].reset();
           window.location.reload();
                  
                  
            
              
                 },
              error: function()
              {
               alert("error");
              }
           });
   });

</script>

//this is my function for opening the modal

 function add_person()
   {
          save_method = 'add';
 
 
   
    $('.form-group').removeClass('has-error'); // clear error class
    $('.help-block').empty(); // clear error string
    $('#createModall').modal('show'); // show bootstrap modal
    $('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
    
   
    }

Controller

public function ajax_list()
    {
        
        
        $list = $this->transactions->get_datatables();
        $data = array();
        $no = $_POST['start'];
        foreach ($list as $person) {
            $no++;
            $row = array();
            $row[] = $person->eventID;
            $row[] = $person->description;
            $row[] = $person->derbyDate;
            $row[] = $person->fightType;
            $row[] = $person->host;
            $row[] = $person->venue;            
            $row[] = $person->createdBy;
            $row[] = $person->dateCreated;
            $row[] = $person->updatedBy;
            $row[] = $person->dateUpdated;
            
     
            
            //This is where the value of my row is getting stored. $person->eventID
            $row[] = '
                      <a class="btn btn-sm btn-danger" href="javascript:void(0)" title="Add" onclick="add_person('."'".$person->eventID."'".')"><i class="glyphicon glyphicon-search"></i> Add</a>
                      ';
            
            $data[] = $row;
        }
        
        $output = array(
            "draw" => $_POST['draw'],
            "recordsTotal" => $this->transactions->count_all(),
            "recordsFiltered" => $this->transactions->count_filtered(),
            "data" => $data,
        );
        //output to json format
        echo json_encode($output);
    }

Answer

You are already passing id inside your function i.e : onclick="add_person('."'".$person->eventID."'".')" so just get that id as parameter when you defined your function and use $("#eventID").val(id) to set that value inside your input-box . i.e :

function add_person(id){
$("#eventID").val(id)
//other codes...
}