Jquery añadiendo la función de clic a varios tramos con la misma clase

Estoy tratando de usar jquery para agregar una función .click() a varios tramos generados dinámicamente usando su clase. Lo que estoy tratando es esencialmente:

 $(".spanClass").click(function () {}); 

También he intentado:

 $(".spanClass").on("click", function () {}); 

Ahora, todo esto funciona, hasta cierto punto. Mi problema es que .click() solo se asigna al primer intervalo con esta clase. Cada otro lapso con esta clase no hace absolutamente nada cuando lo hago clic. Obviamente, necesito que cada lapso con la clase tenga el .click() .

Puede ser importante tener en cuenta que mis intervalos están contenidos dentro de las celdas de una tabla. Cada intervalo está en una celda diferente, y solo hay una celda por fila de tabla que contiene un intervalo.

Cualquier ayuda es muy apreciada.

JSFiddle de lo que estoy trabajando. JSFiddle link

Nota de edición: Originalmente, esta pregunta involucraba el uso de una identificación en lugar de una clase. La gente señaló que debería usar la clase en su lugar, y debería editar la pregunta si eso no funcionó.

Edición 2: Se agregó información sobre las tablas.

Edición final: Mejor solución elegida. Si te encuentras con este problema, la mejor respuesta está funcionando. Mi problema era un problema de secuencias de comandos dentro de mi propia función .on (“clic”).

Necesitas usar una class lugar de una id .

La id debe ser única en toda la página:

La ID debe ser única en un documento, y se usa a menudo para recuperar el elemento usando getElementById.

Debido a esto, tratar de asignarle el evento de click se disparará solo en la primera aparición del intervalo con id = spanId

Vea el ejemplo a continuación y use .on("click", function()) lugar de .click()

 $(".yourspanclass").on("click", function(){ // do what you need on click }); 

ver un ejemplo de trabajo AQUÍ