Asignar valores de forma dinamica a <span> creados dinamicamente

[JeMaGa]

Buenos Dias

Llevo bastante tiempo con un problema que hasta el momento no he logrado solucionar, se que debe ser sencillo pero hasta el momento no lo he logrado.

Lo que necesito hacer es lo siguiente:

Estoy creando una tabla dimanica según la cantidad que yo indique. Dentro de esta tabla cada fila tiene 2 radiobutton, necesito que cuando yo le de en algún radiobutton me asigne un valor en el span de su fila correspondiente


Esta es la estructura de mi tabla dinamica

Código HTML:

<table id="js-tabla" class="table table-striped table-bordered">
<thead>
<tr>
     <th>No.</th>
     <th><center>Posición Asignada</center></th>
</tr>
</thead>
<tbody>
<tr id="1">
     <td>1</td>
     <td><center><input id="stock1" class="disponibilidad" name="radio1" value="1:Stock" type="radio"></center>
     </td>
     <td><center><input id="libre1" class="disponibilidad" name="radio1" value="1:Libre" type="radio"></center>
     </td>
     <td><span id=span1></span></td>
</tr>
</tbody>
</table> 

Código jquery:

$(".disponibilidad").on("click", function(e) {
            $("#span"+x).text(conteoStock[posiArrayStock]);
            posiArrayStock++;
            x++;
        });
 

Si le doy en stock1 o en libre1 muestre un valor en el span1, pero si le doy en el stock2 o en libre2 muestre un valor en el span2

Agradezco toda la ayuda que me puedan brindar

[Alexis88]

Toma a la fila que contiene tanto al <span> como al radiobutton utilizando el método .parents(), pasándole como argumento el identificador o nombre de etiqueta de la fila:

Código Javascript:

$(".disponibilidad").on("click", function(e){
    var fila = $(this).parents("tr");
});
 

Y luego tan solo debes tomar al <span> que la fila contiene, para lo cual necesitas usar el método .find():

Código Javascript:

$(".disponibilidad").on("click", function(e){
    var fila = $(this).parents("tr"),
        span = fila.find("span");
});
 

Ya teniendo al <span>, puedes asignarle el contenido que desees:

Código Javascript:

span.text("lo que sea");
 

Hay muchas otras formas de hacer esto; incluso puedes hacerlo todo en una sola fila. Lo describí de esta manera para que puedas tener una idea más clara.

[JeMaGa]

Muchas gracias por tu ayuda, la verdad no tengo mucho conocimiento al respecto, pero me sirvió, tengo otra pregunta necesito que si le doy en stock1 muestre 10 pero si le doy en libre1 muestre 5, tambien se puede hacer con .find() pero pasandole el id de cada radiobutton.

ose algo asi

Código Javascript:

$(".disponibilidad").on("click", function(e){
            var fila = $(this).parents("tr"),
            span = fila.find("span");
            stock = fila.find("#stock");
            libre = fila.find("#libre");
            
            if(stock.click()){
              span.text("10");
            }else if (libre.click()){
                span.text("5");
            }   
        });
 

[Alexis88]

La condición debería verificar el identificador del radiobutton seleccionado:

Código Javascript:

if (/^libre/.test($(this).prop("id"))){
    //Si el identificador del radiobutton seleccionado empieza por "libre"
}
else{
    //Si empieza por otra palabra
}
 

[JeMaGa]

Hola, muchas gracias por tu ayuda si funciono como me lo explicaste, por si alguien se le presenta el problema a continuación muestro como quedo

Código Javascript:

$(".disponibilidad").on("click", function(e){
            var fila = $(this).parents("tr"),
            span = fila.find("span");
            
            if (/libre/.test($(this).prop("id"))){
                alert("Si el identificador del radiobutton seleccionado empieza por libre");
                span.text(conteoLibre[posiArrayLibre]);
                posiArrayLibre++;
            }else{
                alert("Si empieza por otra palabra");
                span.text(conteoStock[posiArrayStock]);
                posiArrayStock++;
            }            
        });
 

[JeMaGa]

Oye una ultima ayuda por favor, como puedo dejar readonly la fila completa?

Código Javascript:

$(this).parents("tr").prop("readonly", true);
 

No me funciona

[Alexis88]

Esa es una propiedad de elementos de formulario, no de filas de una tabla ni similares. Si lo que quieres es inhabilitar a los elementos de la fila en cuestión, vas a tener que seleccionarlos y aplicarles uno por uno dicha propiedad, tal cual hiciste para tomar al <span>.