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 layers = {};

var onTensaoFocusOut = function (event) {

}

geraCamadas.addEventListener("click", function (event) {
  var itens = camadas.querySelectorAll(".ui-field-contain");
  var limite = parseInt(numeroCamadas.value);
  var indice = itens.length;

  if (indice != limite) {
    if (indice < limite) {
      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);
      }      
    } else {    
      indice--;
      for (;indice >= limite; indice--) {
        layers["layer" + indice] = null;
        for (var prox = 0; prox <= 3;) {
          camadas.removeChild(itens[indice].nextSibling);
          if (itens[indice].nextSibling.nodeType == 1) {
            prox++
          }
        }
        camadas.removeChild(itens[indice]);
      }
    }
    //aqui está o pulo do gato!
    $(camadas).trigger("create");
  }
});