Data not getting passed to the ajax function

Question

The form below is present in every row of an html table.However alert("dfd") pops up only for the first row of the table and not for the forms in the other rows(these forms appear on the webpage).Can anyone tell why is it happening?

HTML:

 <form class='form form-horizontal' method='post' role='form' id='formsel' name='formsel'>
        <fieldset  >   
        <div>    
            <span class='control-group' >
            <span  class='controls'>
                <select id='formcont' name='formcont' class='form-control' style='cursor:pointer;'>
                    <option selected='selected' style='display:none;'>Select</option>
                    <option  value='1'>Option1</option>
                    <option  value='2'>Option2</option>
                    <option  value='3'>Option3</option>

            </select> <button id='selbtn' name='selbtn' type='submit'>Sub,it</button>

            </span>
            </span></div>

        </fieldset>

    </form>

JS:

$("#formsel").submit(function () {
    alert("dfd");
    $.ajax({
        url:"add.php",
        data:$("#formcont").val().serialize(),
        type:"POST",
        success:function(data){
            console.log(data);
            if(data=="done"){
                alert("success");
            } 
        },
        error:function(data){
            alert("Network ERROR");
        }
    })
    return false;
});


$("#selbtn").click(function () {
  ("#formsel").submit();
});

PHP:

 <?php
    include ('db.php');
    session_start();

    echo "done";
    ?>

Answer 1

Yes, because you're not sending any data:

$("#formcont").val().serialize()

Should be:

$(this).serialize()

Since the button you're clicking to trigger the submit is a submit button, you really do not need the following code:

$("#selbtn").click(function () {
  ("#formsel").submit();
});