Sending submit form values from modal to another modal php

I am working in a php project and I have two modal. The first modal contains a form, after form submission the modal must send form values using $_POST to another modal (that will appear after submission). All these steps worked except that the $_POST array appears empty in the second modal. I wonder if there is something missing I must include or should I use something else I jQuery.

Here's my code

<button type="button" class="btn btn-red pull-right" data-toggle="modal" data-target="#newvisitor1" data-whatever="@mdo">New Visitor</button>

<!-- First Modal -->

<div class="modal fade" id="newvisitor1" tabindex="-1" role="dialog" aria-labelledby="modelLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modelLabel">New Visitor</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="visitorForm1" action="" method="post" role="form">
                <div class="modal-body">
                    <div class="form-group mb-4">
                        <input type="text" class="form-control" id="cpr" name="cpr" pattern="\d*" title="only numbers allowed" minlength="9" size="9" maxlength="9" placeholder="Visitor CPR" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="cancel1" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" id="checkVisitor" name="checkVisitor" class="btn btn-red pull-right">Check Visitor</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Second Modal -->

<div class="modal fade" id="newvisitor2" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="modelLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="visitorForm2" action="index.php" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="modelLabel">New Visitor</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-visitor" role="tabpanel" aria-labelledby="pills-visitor-tab">
                            <div id="visitorForm">
                                <h6>Visitor's Details</h6>
                                <div class="form-group mb-4">
                                    <div class="form-row">
                                        <div class="col-6">
                                            <input type="text" id="firstName" name="firstName" class="form-control" placeholder="First Name" autofocus>
                                        </div>
                                        <div class="col-6">
                                            <input type="text" id="lastName" name="lastName" class="form-control" placeholder="Last Name">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mb-4 mt-4">
                                    <input type="text" class="form-control" id="cpr" name="cpr" pattern="\d*" title="only number allowed" minlength="9" size="9" maxlength="9" placeholder="CPR" required>
                                </div>
                                <div class="form-group mb-4">
                                    <div class="form-row">
                                        <div class="col-4">
                                            <input type="text" id="house" name="house" class="form-control" placeholder="House">
                                        </div>
                                        <div class="col-4">
                                            <input type="text" id="road" name="road" class="form-control" placeholder="Road">
                                        </div>
                                        <div class="col-4">
                                            <input type="text" id="block" name="block" class="form-control" placeholder="Block">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mb-4 mt-4">
                                    <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="Phone Number" required>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="type" name="type" value="visitor">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-red">Register</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#visitorForm1").submit(function() {
            $('#newvisitor1').modal('hide');
            $('#cancel1').click();
            $('#newvisitor2').modal('show');


            return false;
        });
    });
</script>