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


  <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 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 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 class="form-group">
                                    <label for="description">Entry Name</label>
                                    <input type="text" class="form-control" id="entryName" name="entryName" placeholder="" >
                                 <div class="form-group">
                                    <label for="description">Owner/Financier</label>
                                    <input type="text" class="form-control" id="owner" name="owner" placeholder="" >
                                 <div class="form-group">
                                    <label for="description">No Fights</label>
                                    <input type="number" class="form-control" id="noOfFight" name="noOfFight" placeholder="">
                                 <div class="form-group">
                                    <label for="description">Score/Level</label>
                                    <input type="number" class="form-control" id="score" name="score" placeholder="" >
            <!--                     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 class="card-body table-responsive " style="display: inline-block;">
        <table class="table table-bordered" border="1" id="applicanttable">
                <div class="row">
              <th>Wingband #</th>
           <tr id="row_0">
                 <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
              <td class="labelcell">
                 <input id="lightBand" name="lightBand1" type="number" value="" class="auto"/>
              <td class="labelcell">
                 <input id="weight" name="weight1" type="number" />
              <td class="labelcell">
                 <input id="wingBand" name="wingBand1" type="number" />
              <td class="labelcell">
                 <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
       <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
                           <button type="submit" class="btn btn-danger">Submit</button>
</div> // please ignore the missing divs. :(( thank you


// This is my insert function using ajax

<script type="text/javascript">

   $("#insertParticipant").submit(function(event) {
               url: "<?php echo base_url('transaction/createParticipant');  ?>",
               data: $("#insertParticipant").serialize(),
               type: "post",
               async: false,
               dataType: 'json',
               success: function(response){
              error: function()


//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


public function ajax_list()
        $list = $this->transactions->get_datatables();
        $data = array();
        $no = $_POST['start'];
        foreach ($list as $person) {
            $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);


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){
//other codes...