the_mechanic/app/Views/make_list.php

<?php include('layout/header.php'); ?>

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box page-title-box-alt">
                <h4 class="page-title">Make List</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class=""> 
                            <a href="#" data-toggle="modal" data-target="#bike_make_login-modal" class="btn btn-primary waves-effect" onclick="clearDetials(this)"> 
                                <i class="ri-add-line"></i>
                            </a>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <table id="datatable-buttons" class="table table-striped dt-responsive nowrap w-100" style="width:100% !important;text-align: center;width: 100%;">
                        <thead>
                            <tr>
                                <th>Bike Make</th>  
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>                                
                            <?php foreach ($make as $item): ?>
                                <tr>
                                    <td class="make"><?php echo $item['make']; ?></td>
                                    <td>
                                        <a data-toggle="modal" data-target="#bike_make_login-modal" data-value="<?php echo $item['make_id']; ?>" class="edit-button" onclick="editMake(this)"><i class="ri-pencil-line"></i></a>

                                        <a href="#" data-toggle="modal" data-target="#bike_model_login-modal" style="margin-left: 12px;" class="add-button" title="Add" data-id="<?php echo $item['make_id']; ?>" data-value="<?php echo $item['make']; ?>" onclick="setMakeName(this)">
                                            <i class="ri-add-line icon-large"></i>
                                        </a>
                                        <a href="<?= "bike_model_index/" . $item['make_id']; ?>" class="view-list-button" title="Model List" style="margin-left: 12px;">
                                            <i class="ri-list-check-2 icon-large"></i>
                                        </a>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <!-- Start Bike Make Create Pop-UP -->
    <div id="bike_make_login-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="text-center mt-2 mb-4">
                       <h4 id="form_add_edit">Add Bike Make</h4>
                    </div>

                    <form id="model_form_data" class="px-3">

                        <div class="form-group">
                            <label for="makename">Make Name </label>
                            <input type="text" id="edit_make_id" hidden>
                            <input class="form-control" type="text" id="bike_make_name" required="" placeholder="Make Name....">
                        </div>

                        <div class="form-group text-center">
                            <button class="btn btn-rounded btn-primary" type="submit" onclick="submitMake(this)">Submit</button>
                        </div>

                    </form>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- End Bike Make Create Pop-UP -->

    <!-- Start Bike Model Create Pop-UP -->
    <div id="bike_model_login-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="text-center mt-2 mb-4">
                       <h4>Add Models</h4>
                    </div>

                    <form id="model_form_data" class="px-3">

                        <div class="form-group">
                            <input class="form-control" type="text" id="make_id" required="" placeholder="Make Name...." style="display:none;">
                            <label for="makename">Make Name </label>
                            <input class="form-control" type="text" id="makename" required="" placeholder="Make Name...." disabled>
                            <label for="modelname">Model Name </label>
                            <input class="form-control" type="text" id="modelname" required="" placeholder="Model Name....">
                        </div>

                        <div class="form-group text-center">
                            <button class="btn btn-rounded btn-primary" type="submit" onclick="submitModel(this)">Submit</button>
                        </div>

                    </form>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- End Bike Model Create Pop-UP -->


<?php include('layout/footer.php'); ?>


<script>

    function setMakeName(params) {

        $('#make_id').val(params.getAttribute('data-id'));
        $('#makename').val(params.getAttribute('data-value'));
    }


    function submitModel(params) {
        console.log( $('#modelname').val());
        var formData = {
            make_id: $('#make_id').val(),
            modelname: $('#modelname').val()
        };

        $.ajax({
            type: 'POST',
            url: 'create_model', 
            data: formData,
            dataType: 'json',
            success: function(response) {
                // Handle success response here
                console.log(response);
                $('#bike_model_login-modal').modal('hide');
                $('#modelname').val('');
            },
            error: function(xhr, status, error) {
                // Handle error response here
                console.error(xhr.responseText);
            }
        });
    }

    function submitMake(params) {
        var formData = {
            makename: $('#bike_make_name').val()
        };

        var edit_make_id = $('#edit_make_id').val();

        if (!edit_make_id) {
            edit_make_id =0;
        }

        $.ajax({
            type: 'POST',
            url: 'create_make/'+edit_make_id, 
            data: formData,
            dataType: 'json',
            success: function(response) {
                console.log(response);
                $('#bike_model_login-modal').modal('hide');
                $('#bike_make_name').val('');
            },
            error: function(xhr, status, error) {
                // Handle error response here
                console.error(xhr.responseText);
            }
        });
    }


    function editMake(params) {

        $('#edit_make_id').val($(params).data('value'));
        $('#form_add_edit').text('Edit Bike Make');

        var full_div = $(params).parent().parent()[0];

        $('#bike_make_name').val($(full_div).find('.make').text());
    }

    function clearDetials(params) {
        $('#form_add_edit').text('Add Bike Make');

        $('#bike_make_name').val('');
    }


</script>