how to call a form from a second application and performing actions?

I have an app running on localhost:port1. On this app, there is a button which when clicked, opens up a modal dialog which has form with First name, Last name and a close and submit button. I have another app running on localhost:port2. I have a button which when clicked, opens up a modal dialog. withing this dialog in app2, I have an iframe which I will like to have the form from localhost:port1 and to also be able to perform the same action as if i was doing in it from the first app.

Currently I am getting the form in the iframe using jquery ajax but however, i am not able to perform any action because non of the buttons work. Below is the jquery code in my second app which gets the form from app1.

<script>
    $(document).ready(function () {
        $.get('https://localhost:port1/').then(function (html) {
            // Success response
            var $mainbar = $(html).find('#InsertDialog');
            $("#iframe").append('<iframe id="iframe"></iframe>');

            setTimeout(function () {
                var iframeBody = $("#iframe").contents().find("body");

                iframeBody.append($mainbar);
            },
                333
            );
        }, function () {
            // Error response
            document.write('Access denied');
        });
    });
</script>

In my second app, i have the following page,

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1" id="openModal">Open dialog</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal1" role="dialog" style="background: bisque">
        <div class="modal-dialog modal-lg" style="height: 100%; width: 100%;">

            <!-- Modal content-->
            <div class="modal-content" style="height: 90%; width: 100%">
                <div class="modal-body">
                    <iframe name="iframe" id="iframe" style="overflow: hidden; height: 80%; width: 90%; border: none;" scrolling="yes"></iframe>
                </div>
                @*<button type="button" class="btn btn-default" id="closeMyIframe">close</button>*@
                <div class="modal-footer" style="background: bisque">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="reload">Close</button>
                </div>
            </div>
        </div>
    </div>

I am beginner in this and I don't seem to find a solution for my scenario. Thanks