Guardar campos dinámicos de un formulario a mysql

[MLDGATO]

Hola tengo un formulario que me sirve para realizar cotizaciones, en dicho formulario agrego los datos del cliente al que le quiero cotizar y los elementos que le cotizo, la cosa es que hay cotizaciones que solo tienen un producto y otros que tienen más de uno, entiendo bien que debo utilizar dos tablas una que tenga los datos de la cotización y otra que tenga los elementos de la cotizaciones pero mi problema es que estoy generando los campos de las descripciones forma dinámica y ahí es donde no se como guardarlos en la base de datos, lo que tengo es lo siguiente:

Código HTML:

<form id="PerfilPuesto" name="PerfilPuesto" method="post">
              <h1>Nueva Cotización</h1>
              <table width="950">
                <tr>
                  <td><p>
                    <label for="Empresa">Nombre de la Empresa:</label>
                    </p>
                    <p>
                      <input name="Empresa" type="text" required="required" class="datos" id="Empresa">
                  </p></td>
                  <td><p>
                    <label for="Contacto">Contácto:</label>
                    </p>
                    <p>
                      <input name="Contacto" type="text" required="required" class="datos" id="Contacto">
                  </p></td>
                  <td><p>
                    <label for="Email">Email:</label>
                    </p>
                    <p>
                      <input name="Email" type="email" required="required" class="datos" id="Email">
                  </p></td>
              </tr>
                <tr>
                  <td><p>
                    <label for="Tel">Teléfono:</label>
                    </p>
                    <p>
                      <input name="Tel" type="text" required="required" class="datos" id="Tel">
                  </p></td>
                  <td><p>
                    <label for="NIT">NIT:</label>
                    </p>
                    <p>
                      <input name="NIT" type="text" class="datos" id="NIT">
                  </p></td>
                  <td><p>
                    <label for="Direccion">Dirección:</label>
                    </p>
                    <p>
                      <input name="Direccion" type="text" class="datos" id="Direccion">
                  </p></td>
              </tr>
            </table>
            <br />
              <table width="950">
                <tr>
                  <td><p>
                    <label for="cant1">Cantidad:</label>
                    </p>
                    <p>
                      <input name="cant1" type="number" required="required" class="datosmenor3" id="cant1">
                  </p></td>
                  <td><p>
                    <label for="desc1">Descripción:</label>
                    </p>
                    <p>
                      <input name="desc1" type="text" required="required" class="datos3" id="desc1">
                  </p></td>
                  <td><p>
                    <label for="Prec1">Precio Unitario:</label>
                    </p>
                    <p>
                      <input name="Prec1" type="number" required="required" class="datosmenor3" id="Prec1">
                  </p></td>
                </tr>
              </table>
              <br />
            <a href="JavaScript:agregarCampo();" class="link"> Agregar Descripción </a>
            <div id="contenedorcampos">
                <!--Dentro de este div se generan los campos dinámicos-->
        </div>
            <table align="center"><tr><td><input name="submit" type="submit" class="botonform" id="submit" value="Enviar"></td></tr></table>
            </form>
 

Ese el el formulario html y dento del div con el nombre contenedorcampos van a crearse todos los campos dinámicos

Código Javascript:

function agregarCampo(){
    campos = campos + 1;
    var NvoCampo= document.createElement("div");
    NvoCampo.id= "divcampo_"+(campos);
    NvoCampo.innerHTML= 
        "<table width='950'>" +
        "   <tr>" +
        "     <td nowrap='nowrap'>" +
        "       <p><label>Cantidad</label></p>" +
        "        <p><input type='number' class='datosmenor3' required='required' min='1' name='cant" + campos + "' id='cant" + campos + "'></p>" +
        "     </td>" +
        "   <td nowrap='nowrap'>" +
        "       <p><label>Descripión</label></p>" +
        "           <p><input type='text' class='datos3' required='required' name='desc" + campos + "' id='desc" + campos + "'></p>" +
        "     </td>" +
        "     <td nowrap='nowrap'>" +
        "       <p><label>Precio Unitario</label></p>" +
        "        <p><input type='number' class='datosmenor3' required='required' min='1' name='Prec" + campos + "' id='Prec" + campos + "'></p>" +
        "     </td>" +
        "   </tr>" +
        "   <tr>" +
        "     <td nowrap='nowrap'>" +
        
        "     </td>" +
        "     <td nowrap='nowrap'>" +
        
        "     </td>" +
        "     <td nowrap='nowrap' align='right'>" +
        "        <a href='JavaScript:quitarCampo(" + campos +");' class='link'> Quitar </a>" +
        "     </td>" +
        "   </tr>" +
        "</table>";
    var contenedor= document.getElementById("contenedorcampos");
    contenedor.appendChild(NvoCampo);
  }
 
 
function quitarCampo(iddiv){
  var eliminar = document.getElementById("divcampo_" + iddiv);
  var contenedor= document.getElementById("contenedorcampos");
  contenedor.removeChild(eliminar);
}
 

LAs funciones de javascript agregarCampo sirve para crear un campo a la vez y la otra para eliminar el ultimo campo creado pero a la hora de almacenar los elementos en las dos tablas es donde me pierdo.

Muchas gracias por leer y tambien por ayudar.