动态复选框中的数据插入不正确

Question

我在将动态复选框值插入数据库时​​遇到问题。如下所示，如果用户选择“晚餐”，则仅插入所选框的第一个字母。 http://i.imgur.com/EjiT4Au.png

数据插入表格

    foreach ( $_POST["dates"] as $index=>$date ) {
        $origin = $_POST["origins"][$index];
        $destination = $_POST["destinations"][$index];
        $cost = $_POST["costs"][$index];
        $meal = $_POST["meals"][$index];    

    //code for data insertion in other tables

    //Insert into meal table
    $sql_meal1 = sprintf("INSERT INTO tbl_meal (mealType) VALUES ('%s')",
        mysql_real_escape_string($meal));
        $result_meal1 = $db->query($sql_meal1);
        $inserted_meal_id1 = $db->last_insert_id(); 
    }    

动态复选框的Jquery

 $(addMealBtn).click(function(e){   //dynamically adds new row to the Food & Lodging table
        e.preventDefault();
        if (mealCounter <= max_fields){     //check for maximum fields allowed
            var newMealRow = jQuery('<tbody><tr><td>'   //stores data of each field & merge as a new row
                + mealCounter + '</td>'
                + '<td><label><input id ="meals" type="checkbox" name="meals" value="breakfast" >Breakfast</label><br>' //wraps label around checkboxes to allow both of them clickable
                + '<label><input id ="meals" type="checkbox" name="meals" value="lunch" >Lunch</label><br>'                 
                + '<label><input id ="meals" type="checkbox" name="meals" value="dinner" >Dinner</label><br></select></td>'
                + '<td><a href = "#" class = "remove-meal-box"><img src = "DeleteRow.ico" height = "60" width = "60" align = "middle"/></a><br /></td></tr></tbody>'); 
            mealCounter++;

        jQuery('table.meal-details').append(newMealRow);    //append new row to the table
        var meal = $('#meals').val();
        if (mealCounter == max_fields){ //hides add field button when max of fields allowed is reached
            $(addMealBtn).hide();
        }
    }
    });