Loading HTML gridview from html textboxes using jquery in asp.net mvc

Question

    $('#btnAddPhysicians').click(function () {

        var rowCount;
        rowCount = $('#gvPhysicians tr').length;
        if ($('#txtDoctorName').val() != '' && $('#gvPhysicians').length > 1) {
            $('#gvPhysicians').after('<tr><td>' + rowCount + '</td>' +
                '<td>' + $('#txtDoctorName').val() + '</td>' +
                '<td>' + $('#txtSpecialty').val() + '</td>'); 
            $('#divContainer').find('input:text').each(function () {
                $('input:text[id=' + $(this).attr('id') + ']').val('');
            }
            );
        }
        else alert('Invalid!');
    });

now I write this function in jquery but its always executing else statement "Invalid"

code for html textboxes and gridview is below

   <div class="form-group">
                <div class="tab-custom-content">
                    <label for="menu_name">Please list ALL active treating physicians (i.e. pulmonologist, oncologist, internist, cardiologist, etc)</label>
                </div>
                <div class=" row">
                    <div class="col-sm-4">
                        <label for="menu_name">Doctor’s Name</label>
                        <input type="text" class="form-control" id="txtDoctorName" name="txtDoctorName">
                    </div>
                    <div class="col-sm-4">
                        <label for="menu_name">Specialty</label>
                        <input type="text" class="form-control" id="txtSpecialty" name="txtSpecialty">
                    </div>
                    <div class="col-sm-4">
                        <br />
                        <button type="submit" id="btnAddPhysicians" class="btn btn-outline-primary">ADD</button>
                    </div>
                </div>
                <div class=" row">
                    <section class="content">
                        <div class="card">
                            <div class="card-header">

                            </div>

                            <!-- /.card-header -->
                            <div class="card-body">
                                <div id="gvPhysicians" class="jsgrid" style="position: relative; height: 100%; width: 200%;">
                                    <div class="jsgrid-grid-header jsgrid-header-scrollbar">
                                        <table class="jsgrid-table">
                                            <tr class="jsgrid-header-row">
                                                <th class="jsgrid-header-cell jsgrid-header-sortable" style="width: 400px;">Doctor's Name</th>
                                                <th class="jsgrid-header-cell jsgrid-align-right jsgrid-header-sortable" style="width: 250px;">Specialty</th>
                                            </tr>
                                        </table>
                                    </div>
                                    <!-- /.card-body -->
                                    <!-- /.card -->
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class=" row">
                    <button type="submit" id="btnNext1" class="btn btn-outline-primary">Next</button>
                </div>       
            </div>

I want to show txtDoctorName value and txtSpecialty to gridview column on click of btnAddPhysicians.I am doind this in MVC 5 and using jquery for this.

Answer 1

I just added Length >== 1 because it returned Length = 1 each time.