append input text into modal C# MVC 5

Question

I want if is my Status is changed, to add another text box, textArea for additional comment. As you can see on the photo, I've done it, but the position is just dont right, because it's a little bit tricky for modal.

My code is as follows: Please take a deeper look on (.editView):

<div class="modal fade" id="modalEditMerge" tabindex="-1" role="dialog" aria-labelledby="modalEditMerge" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Edit pipeline</h4>
        </div>
        <div class="modal-body">

            <label class="control-label">Client</label>

            @*@Html.DropDownList("client", (SelectList)ViewBag.ClientID, null, new { @class = "form-control" })*@
            <label class="control-label">Field of Cooperation</label>

            @Html.DropDownList("fco", (SelectList)ViewBag.FCOID, null, new { @class = "form-control" })

            <label class="control-label">HR Value</label>


            @*@Html.LabelFor("HR Value","null", new {})*@
            @Html.TextBox("hrvalue", null, new { @class = "form-control" })

            <label class="control-label">Money Value </label>
            @Html.TextBox("moneyvalue", null, new { @class = "form-control" })

            <label class="control-label">Comment</label>

            @Html.TextBox("comment", null, new { @class = "form-control" })

            <label class="control-label">Status</label>

            @Html.DropDownList("status1", (SelectList)ViewBag.StatusID, null, new { @class = "form-control" })


        </div>
        <div class="modal-footer">
            <button id="EditModalNewMerge" type="button" class="modalEdit">Edit</button>
        </div>
    </div>
</div>

 $(document).ready(function() { 
 $('.editView').click(function() {
        var ID = $(this).data('id');
        $("#status1").change(function () //status1 is for my dropDownList Status
   {
            //hide social worker and sponsor stuff
            val = $(this).val();
            if (val == '11') //if is my Status changed to 'Lost' then
   {
                $('#modalEditMerge').append('<input type="aText" id="aText">');
                //show social worker stuff
            } else {
                alert(val); //show sponsor stuff
            }
        });
        //var top = document.getElementById(ID).val();
        //var top = $(this).position().top;
        //alert();
        //createCookie('position', top, 1);
        editID = ID;
        $.ajax({
            url: "/MergePipelineStatus/GetDataFromDb",
            contentType: 'application/json;',
            data: JSON.stringify({ id: ID }),
            type: 'POST',
            success: function(result) {
                if (result.id > 0) {
                    $("#status1").val(result.statusID);
                    $("#hrvalue").val(result.hrvalue);
                    //$("#client").val(result.client);
                    $("#fco").val(result.fco);
                    $("#moneyvalue").val(result.moneyvalue);
                    $("#comment").val(result.comment);


                }
            },
            error: function(valid) {
                //window.location.href = "/Views/ERROR";
                swal("Došlo je do greške!", "Molimo vas da pokušate ponovo!", "error");
            }
        });
    });

    function loadAjax(reason) {
        $.ajax({
            url: "/MergePipelineStatus/EditModal",
            contentType: 'application/json;',
            data: JSON.stringify({ id: editID, status: $("#status1").val(), reason: reason }),
            type: 'POST',
            success: function(result) {

                if (result.boolresponse == true) {
                    $('#modalEditMerge').modal('toggle');
                    //t.ajax.reload();

                    swal({
                            title: "Uspešna izmena",
                            text: "Uspešno ste izmenili stavku!",
                            type: "success",
                            //showCancelButton: true,
                            confirmButtonClass: 'btn-success',
                            confirmButtonText: 'OK',
                            //cancelButtonText: "Odustani",
                            closeOnConfirm: true,
                            //closeOnCancel: false
                        },
                        function(isConfirm) {
                            if (isConfirm) {
                                window.location.href = "/MergePipelineStatus/Index";
                            }
                        });

                } else {

                    swal("Alert!", result.textResponse, "warning");
                }
            },
            error: function(valid) {
                //window.location.href = "/Views/ERROR";
                swal("Došlo je do greške!", "Molimo vas da pokušate ponovo!", "error");
            }
        });
    }
});

Those gray fields are just markers for some sensible data.. White field should be on the modal, below the Status. How can I do that?

Answer 1

Try changing this $('#modalEditMerge').append('<input type="aText" id="aText">'); to $('#modalEditMerge .modal-body').append('<input type="aText" id="aText">');

UPDATE

If you want to check if an input has already been added before appending you could do something like this:

if (val == '11')
    {
        if (!$('#modalEditMerge .modal-body #aText').length)
            $('#modalEditMerge .modal-body').append('<input type="aText" id="aText">');
    }