Insert multiple text inputs with same name, into one cell in MySql

I have multiple inputs

<input size="32" class="mixtapetrack" type="text" id="track[]" name="track[]" >
<input size="32" class="mixtapetrack" type="text" id="track[]" name="track[]" >
<input size="32" class="mixtapetrack" type="text" id="track[]" name="track[]" >
<input size="32" class="mixtapetrack" type="text" id="track[]" name="track[]" >
...and so on (depending on how many they want)

On form submit (using $_POST), i want to take all of the inputs (which by the way, we’ll never now how many will be there [dynamic jquery add/remove input form] ) and combine them into one variable, all nicely separated by ^^^.

B.T.W, I am using this format to insert into mysql

 $sql = mysql_query("INSERT INTO mixtapes (title, songs, posted_by_id, description, date) 
     VALUES('$mixtapetitle','$allmixtapetracks','$posted_by_id','$mixtapedescription', now())")  
     or die (mysql_error());

---

So in the end i want to pack all of the dynamic inputs into one single variable, each one separated by ^^^. The example below is how i want the variable $allmixtapetracks to look, so when I insert it, it looks EXACTLY like that.

Value of input 1^^^Value Of Input 2^^^Value of Input 3^^^Value of input 4^^^

---

EDIT:

This coding is causing my error. When the inputs are dynamicly created, the php $_POST ignores them. Why? I am not sure.

JavaScript:

<script type="text/javascript">

$(document).ready(function(){

    var counter = 3;

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

    if(counter>40){
            alert("The maximum allowed tracks is 40");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.html('<table><tr><td width="88"><label>Track #'+ counter + ' : </label></td><td><input size="32" class="mixtapetrack" type="text" id="track[]" name="track[]" ></td></tr></table>');

    newTextBoxDiv.appendTo("#TextBoxesGroup").hide().show(50);


    counter++;
     });

     $("#removeButton").click(function () {
    if(counter==3){
          alert("Your mixtape must contain at least two tracks!");
          return false;
       }   

    counter--;

        $("#TextBoxDiv" + counter).remove().show().hide(40);

     });


  });
</script>

HTML:

 <form action="add-mixtape.php" name="addmixtapeForm" class="addmixtapeForm" id="addmixtapeForm" autocomplete="off" method="post" enctype="multipart/form-data">
<div id='TextBoxesGroup'>
             <div id="TextBoxDiv1">
             <table>
              <tr>
               <td width="88"><label>Track #1: </label></td>
               <td><input size="32" class="mixtapetrack" type="text" id="track[]" name="track[]" ></td>
              </tr>
             </table>
             <table>
              <tr>
               <td width="88"><label>Track #2: </label></td>
               <td><input size="32" class="mixtapetrack" type="text" id="track[]" name="track[]" ></td>
              </tr>
             </table>
             </div>
            </div>
            <input type="button" value="Add Track" id="addButton" class="addREMOVEmixtapetrack">
            <input type="button" value="Remove Track" id="removeButton" class="addREMOVEmixtapetrack">
</form>

Answer

$alltracks = implode('^^^', $_POST['track']) . '^^^';

Test code:

<?php
$alltracks = implode('^^^', $_POST['track']) . '^^^';
echo $alltracks;
?>

<form action="test.php" method="post">
<input size="32" class="mixtapetrack" type="text" id="track[]" name="track[]" >
<input size="32" class="mixtapetrack" type="text" id="track[]" name="track[]" >
<input size="32" class="mixtapetrack" type="text" id="track[]" name="track[]" >
<input size="32" class="mixtapetrack" type="text" id="track[]" name="track[]" >
<input type="submit">
</form>