JSFiddle - React, Tailwind, and code Playground

by Zharor

HTML

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Gerador de Requisição de Almoxarifado</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

</head>

<body>
<main class="container">
  <form action="php/gerar_pdf.php" role="form" id="formExampleAdd" method="post" accept-charset="utf-8">
  <div id="form-content" class="col-md-12">
    <h3>Gerador de Requisição - Almoxarifado</h3>
    <hr />
    <!-- COMEÇO DOS DADOS DE CONTATO -->
    <div id="example-master" class="row">
      <div class="form-group col-lg-6">
        <div class="form-group required">
          <label for="Examplesecao">Seção Requisitante</label>
          <input name="data[Example][secao]" class="form-control" type="text" id="Examplesecao" required="required">
        </div>
      </div>

			<div class="form-group col-lg-6">  
        <div class="form-group required">
          <label for="Exampledata">Data</label>
          <input name="data[Example][data]" class="form-control" type="text" id="Exampledata" required="required">
        </div>
      </div>

      <div class="form-group col-lg-6">
          <div class="form-group required">
            <label for="Exampleramal">Ramal do Setor</label>
            <input name="data[Example][ramal]" class="form-control" type="text" id="Exampleramal" required="required">
          </div>
      </div>

      <div class="form-group col-lg-6">
          <div class="form-group required">
            <label for="Examplechefe">Chefe do Setor Requisitante</label>
            <input name="data[Example][chefe]" class="form-control" type="text" id="Examplechefe" required="required">
          </div>
        </div>

        <div class="form-group col-md-12">
            <div class="form-group required">
              <label for="Exampleresponsavel">Responsável pelo Recebimento</label>
              <input name="data[Example][responsavel]"...

JavaScript

(function($) {
  
  var counter = -1;
     
  addRow = function() {
    
    var table = $('#details-table');
    var input = null;
    
    var row = $('<tr>');
    var cols = [];
    
    counter++;

      // Coluna 1
      input = $('<input>').addClass('form-control').attr('name', 'data[ExampleItems][' + counter + '][item]').val(counter);      
      cols.push(
        $('<td>').append(
          $('<div>').addClass('form-group').append(input)
        )        
      );
    
      // Coluna 2
      input = $('<input>').addClass('form-control').attr('name', 'data[ExampleItems][' + counter + '][descricao]');
      cols.push(
        $('<td>').append(
          $('<div>').addClass('form-group').append(input)
        )
      );
      // Coluna 3
      input = $('<input>').addClass('form-control').attr('name', 'data[ExampleItems][' + counter + '][unidade]');
      cols.push(
        $('<td>').append(
          $('<div>').addClass('form-group').append(input)
        )
      );
      // Coluna 4
      input = $('<input>').addClass('form-control').attr('name', 'data[ExampleItems][' + counter + '][pedido]');
      cols.push(
        $('<td>').append(
          $('<div>').addClass('form-group').append(input)
        )
      );
    
      // Button Remove
      cols.push(
        $('<td>').addClass('actions').append(
          $('<button>').addClass('btn btn-danger btn-remove-item').html('&times;').attr('type', 'button').on('click', removeRow)
        )
      );

    row.append(cols);
    table.append(row);

    return false;
  }

  removeRow = function() {
    
    var tr = $(this).closest('tr');

    tr.fadeOut(400, function() {
      tr.remove();  
    });

    return false;
  }
  
  $('#btn-add-item').click(addRow);
})(jQuery);