My form always sends the first option

I have a very simple HTML form. The form is connected to a PHP file so it emails the results to me. But I have a problem with radio buttons. No matter what radio button the user selects, the email always says that the user selected the first radio button.

I've done some research and I think I need to write "echo $gender;" in the PHP file somewhere. I've tried this and Dreamweaver always marks it as a syntax error.

Here is the essential code:

HTML:

<form>
<input type="radio" name="gender" id="gender" value="female" /> Female<br>
<input type="radio" name="gender" id="gender" value="male" checked /> Male<br>
</form>

PHP: $(function() {

$("input,textarea").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
        // additional error messages or events
    },
    submitSuccess: function($form, event) {
        // Prevent spam click and default submit behaviour
        $("#btnSubmit").attr("disabled", true);
        event.preventDefault();

        // get values from form
        var gender = $("input#gender").val();

        $.ajax({
            url: "././mail/contact_me.php",
            type: "POST",
            data: {gender: gender},
            cache: false,
            success: function() {
                // Enable button & show success message
                $("#btnSubmit").attr("disabled", false);
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Your message has been sent. </strong>");
                $('#success > .alert-success')
                    .append('</div>');

                //clear all fields
                $('#contactForm').trigger("reset");
            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-danger').append("<strong>Sorry, it seems that my mail server is not responding. Please try again later!");
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                $('#contactForm').trigger("reset");
            },
        })
    },
    filter: function() {
        return $(this).is(":visible");
    },
});

$("a[data-toggle="tab"]").click(function(e) {
    e.preventDefault();
    $(this).tab("show");
});
});