¿Por qué código JavaScript no funciona con loop de Wordpress?

[MajitoARG]

Hola! El tema lo inicié en [URL="http://www.forosdelweb.com/f13/agregar-quitar-contenido-texto-label-div-otro-con-boton-1117515/"]este post[/URL] y fue solucionado gracias a [URL="http://www.forosdelweb.com/miembros/alexis88/"]Alexis88[/URL] . El código JavaScript funciona 100%, pero a la hora de aplicarlo en un loop de Wordpress el código deja de funcionar.
FUNCIONAMIENTO: la idea es un formulario que mediante un loop de WP muestra una lista con todos los productos de una categoría. Cada producto tieneun INPUT para poner la cantidad deseada. También hay un botón para "Agregar" a una lista o "Eliminar" de dicha lista. Luego, tanto el nombre del producto como la cantidad ingresada son listados en un TEXTAREA (lista).

Aclaración: ya declaré en el archivo functions.php el wp_enqueue_script y demás.

FORMULARIO.PHP:
(...)
<section id="form">
<form id="pedido" name="pedido" action="<?php bloginfo('template_url')?>/procesar2.php" method="post">
<?php query_posts('category_name=auriculares'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div>
<label class="producto"><?php the_title(); ?> [<?php echo get_post_meta($post -> ID, 'codigo', true); ?>] </label>
<input type="number" class="cant" onchange="cambia(this)" />
<input type="button" value="Agregar" onclick="agregar(this)" disabled />
</div>
<br>
<?php endwhile; else: ?>
<h1>No se encontraron productos</h1>
<?php endif; ?>
<textarea id="caja" rows="5" style="width:350px;"></textarea>

<br>
<input type="submit" name="Submit" id="btn_enviar" value="Enviar">
</form>
</section>
(...)

ARCHIVO JS:
var objeto = {};

function agregar(boton) {
var padre = boton.parentNode,
producto = padre.querySelector(".producto").innerText,
caja = document.querySelector("#caja"),
cantidad = padre.querySelector(".cant").value,
numero = producto.match(/\s\d\s/g);

if (numero in objeto){
delete objeto[numero];
boton.value = "Agregar";
}
else{
objeto[numero] = producto + cantidad;
boton.value = "Eliminar";
}

caja.value = null;

for (var prop in objeto){
caja.value += objeto[prop] + "\n";
}
}

function cambia(number){
var boton = number.parentNode.querySelector("[type=button]");

//Solo habilito al botón cuando el elemento de tipo 'number' contenga algún valor
if (number.value.length){
boton.disabled = false;
}
else{
boton.disabled = true;
}
}