i dont want to use serialize() function please help me with this. I am a beginner

html

        <input type='button' value='Add Tier Flavor' id='Add'>
        <input type='button' value='Remove Tier Flavor' id='Remove'>

        <div id='batch'>
            <div id="BatchDiv1">
                <h4>Batch #1 :</h4>
                <label>Flavor<input class="textbox" type='text' id="fl1" name="fl[]" value=""/></label></br>
                <label>Filling<input class="textbox" type='text' id="fi1" name="fi[]" value="" /></label></br>
                <label>Frosting<input class="textbox" type='text' id="fr1" name="fr[]" value=""/></label></br>

            </div>
        </div>
        <br>

    </div>

this is a dynamically added fields using javascript the code is:

javascript

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){

    var counter = 2;

    $("#Add").click(function () {

        if(counter>5){
            alert("Only 5 Tiers allow");
            return false;
        }
        var newBatchBoxDiv = $(document.createElement('div')).attr("id", 'BatchDiv' + counter);
        newBatchBoxDiv.html('<h4>Batch #'+ counter + ' : </h4>' +
            '<label> Flavor<input type="text" name="fl[]" id="fl' + counter + '" value=""></label><br>'+
            '<label> Filling<input type="text" name="fi[]" id="fi' + counter + '" value=""></label><br>'+
            '<label> Frosting<input type="text" name="fr[]" id="fr' + counter + '" value=""></label><br>' );

        newBatchBoxDiv.appendTo("#batch");

        counter++;
    });

    $("#Remove").click(function () {
        if(counter==1){
            alert("No more tier to remove");
            return false;
        }
        counter--;

        $("#BatchDiv" + counter).remove();
    });



});
 </script>

i am trying to post the values in an array to post it onto next .php page

i am using this

        var user_cupfl =  $('input[name^="fl"]').serialize();
        var user_cupfi =  $('input[name^="fi"]').serialize();
        var user_cupfr = $('input[name^="fr"]').serialize();

serialize is not passing the values. :(

on second page i am trying to mail it using

   $message .= "<tr><td><strong>Cake Flavors(according to batches):</strong> </td><td><pre>" .implode("\n", $user_cupfl). "</pre></td></tr>";
            $message .= "<tr><td><strong>Filling type (Inside the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfi). "</pre></td></tr>";
            $message .= "<tr><td><strong>Frosting type (top of the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfr). "</pre></td></tr>";

i m posting array like this

  $user_cupfl=filter_var($_POST["userCupfl"], FILTER_SANITIZE_STRING);

$user_cupfi=filter_var($_POST["userCupfi"], FILTER_SANITIZE_STRING);
$user_cupfr=filter_var($_POST["userCupfr"], FILTER_SANITIZE_STRING);

your replies will be highly appreciated