JSFiddle - React, Tailwind, and code Playground

by Jelgab

HTML

<div id = "ResultadoDiv"/>
<div id = "Contenedor01" style = "display:none;"/>

JavaScript

//Para guardar el nombre de cada 'variable' (elemento):
var nombresElementos = [];

//Crear los elementos y asignarle datos:
for ( indiceNombreVariable = 0; indiceNombreVariable < 4; indiceNombreVariable++ )
{
    var nombreActual = "prueba_" + indiceNombreVariable;
    nombresElementos.push( nombreActual );
    var elementoNuevo = 
        $("<input type = 'text' id = '" + nombreActual + "'" +
        " value = '" + 2 * indiceNombreVariable + "' />");
    $("#Contenedor01").append(elementoNuevo);
}

//Datos para mostrar 01:
var resultadoHtml =
    "prueba_0 : " + $("#prueba_0").val() + "<br/>" +
    "prueba_1 : " + $("#prueba_1").val() + "<br/>" +
    "prueba_2 : " + $("#prueba_2").val() + "<br/>" +
    "prueba_3 : " + $("#prueba_3").val() + "<br/>";

//Separador:
resultadoHtml += "<hr/>";

//Datos para mostrar 02:
for ( indiceNombreVariable = 0; indiceNombreVariable < 4; indiceNombreVariable++ )
{
    resultadoHtml += 
        "la prueba_" + indiceNombreVariable + " : " + 
        $("#prueba_" + indiceNombreVariable).val() + "<br/>";
}

//Separador:
resultadoHtml += "<hr/>";

//Datos para mostrar 03:
for ( indiceNombreVariable = 0; indiceNombreVariable < 4; indiceNombreVariable++ )
{
    resultadoHtml += 
        "valor de " + nombresElementos[ indiceNombreVariable ] + " : " + 
        $("#" + nombresElementos[ indiceNombreVariable ]).val() + "<br/>";
}

//Mostrar resultados:
$("#ResultadoDiv").html( resultadoHtml );