选择选项会中断标记而不会发布

Question

I'm trying to implement live-table edit, but I'm having some trouble with my select options. The input type="text" is fully functional though.

Ever since I tried to add select, it seemed to brake my entire lay-out. First there were multiple rows and columns displayed on the page. But now there's only one and the columns show up empty after the one that contains select.

And the second problem is that ajax doesn't post the table edit since I added select to the mark-up. I'm thinking that this is because the mark-up breaks, but I'm not sure.

If anybody knows what to do, I'd appreciate it.

Markup

<?php
    $query = ("select * from projectlist");
    $resultaat = mysql_query($query) or die (mysql_error());
    while($row = mysql_fetch_array($resultaat, MYSQL_ASSOC)){
        $id = $row['projectid'];
?>

    <tr class="predit">
    <form action="" method="post">
        //Working input
        <td>
            <span id="klant_<?php echo $id; ?>" class="text"><?php echo $row["Klant"]; ?></span>
            <input type="text" class="ip" id="klant_ip_<?php echo $id; ?>" value="<?php echo $row["Klant"]; ?>">
        </td>

        //Same approach, but with select instead of input
        <td>
            <span id="project_<?php echo $id; ?>" class="text"><?php echo $row["Project"]; ?></span>
            <select id="project_ip_<?php echo $id; ?>" class="ip">
                <?php
                    //Fetch select options from another table
                    $query = ("select * from projecten");
                    $resultaat = mysql_query($query) or die (mysql_error());
                    while($row = mysql_fetch_array($resultaat, MYSQL_ASSOC)){
                        $listid = $row["projectcode"];
                        $projectnaam = $row["projectnaam"];
                ?>
                    <option value="<?php echo $projectnaam; ?>" id="<?php echo $listid; ?>"><?php echo $projectnaam; ?></option>
                <?php
                    }
                ?>
            </select>
        </td>
    </tr>
    </form>
<?php
    }
?>

JQuery Ajax

$(document).ready(function(){
    //Projeclist
    $(".predit").click(function(){
        var ID=$(this).attr('id');

        $("#klant_"+ID).hide();
        $("#project_"+ID).hide();

        $("#klant_ip_"+ID).show();
        $("#project_ip_"+ID).show();
    }).change(function(){
        var ID=$(this).attr('id');
        var klant=$("#klant_ip_"+ID).val();
        var project=$("#project_ip_"+ID).val();

        var dataString = 'id='+ ID
        +'&Klant='+klant
        +'&Project='+project;
        //alert(dataString);

        var project_txt = $("#project_ip_"+ID+" option:selected").text();

        $.ajax({
            type: "POST",
            url: "post_table.php",
            data: dataString,
            cache: false,
            success: function(html){
                $("#project_"+ID).html(project_txt);
                $("#klant_"+ID).html(klant);
            },
            error: function (request, error) {
                console.log(arguments);
                alert(" Can't do because: " + error);
            },
        });
    });

    $(".ip").mouseup(function() {
        return false
    });

    $(document).mouseup(function(){
        $(".ip").hide();
        $(".text").show();
    });
});

post_table.php

<?php
    include('config.php');

    $klant = $_POST['Klant'];
    $project = $_POST['Project'];
    $id = $_POST['id'];

    $query = "update projectlist
    set Klant='$klant',
    Project='$project'
    where projectid='$id'";
    mysql_query($query, $con);
?>