JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js&quot;&gt;"></script>
<div data-role="page">
  <div data-role="header">
    <h1>Page Header</h1>
  </div>

  <div role="main" class="ui-content">
    <ul data-role="listview" data-inset="true">
      <li class="ui-field-contain">
        <label style="width:3em; float:left;">Número de Camadas</label> 
        <div style="float:right; width:30%;">
          <input type="number" value="2" id="numeroCamadas">
          <button id="geraCamadas">Gerar Camadas</button>
        </div>
      </li>
    </ul>
    <ul data-role="listview" data-inset="true" id="camadas">

    </ul>
  </div>
  <div data-role="footer">
    <h4>Page Footer</h4>
  </div>
</div>
<template id="tmplCamada">  
  <li class="ui-field-contain">

    <h5>Camada </h5>
    <div style="float:left; width:30%;">
      <input type="number" placeholder="Altura" value="" id="altura" />
    </div>
    <div style="float:left; width:30%;">
      <input type="number" placeholder="Peso Especifico" value="" id="pesoEspecifico" />
    </div>
    <div style="float:left; width:30%;">
      <input type="number" placeholder="Tensão Horizontal" value="" id="geraCamadasHorizontal" />
    </div>
    <br>
  </li>
  <li>Espessura da Camada:<b id="espessuraCamada"></b></li>
  <li>Tensão Total:<b id="uMedia"></b></li>
  <li>Tensão Efetiva:<b id="fc"></b></li><br>

</template>

JavaScript

var tmplCamada = document.getElementById("tmplCamada").content;
var numeroCamadas = document.getElementById("numeroCamadas");
var geraCamadas = document.getElementById("geraCamadas");
var camadas = document.getElementById("camadas");

var onTensaoFocusOut = function (event) {

}

geraCamadas.addEventListener("click", function (event) {
  var limite = parseInt(numeroCamadas.value);
  var indice = 0;
  var layers = {}

  for (;indice < limite; indice++) {
    layers["layer" + indice] = { 
      'espessura':0 ,
      'altura':0 ,
      'pesoEspecifico':0,
      'tensaoHorizontal':0,
      'poroPressao':0,
      'tensaoTotal':0,
      'tensaoTotalMeio':0,
      'tensaoTotalEfetiva':0,
      'tensaoTotalEfetivaMeio':0
    };

    var camada = document.importNode(tmplCamada, true);
    var titulo = camada.querySelector("h5");
    var elementos = camada.querySelectorAll("[id]");

    titulo.textContent += (indice + 1);
    [].forEach.call(elementos, function (element) {
      element.id += (indice + 1);
      if (element.tagName == "INPUT") {
        element.placeholder += (indice + 1);
        element.addEventListener("focusout", onTensaoFocusOut);
      };    
    });

    camadas.appendChild(camada);
    
    //aqui está o pulo do gato!
    $(camadas).trigger("create");
  }
});