Cacher is the code snippet organizer for pro developers

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>

function createProfile(e) {
  e.preventDefault();
  var form = document.forms[0];
  var data = {};

  for (var i = 0; i < form.elements.length; i++) {
    var element = form.elements[i];
    data[element.name] = element.value;
  }
  
  var template = "<div class='profile'>{{fname}} {{lname}}</div>";
  var output = Mustache.render(template, data);

  document.getElementById("result").innerHTML = output;
}

<div class="container">
  <h1>Profile Builder</h1>

  <form action="#" onSubmit="return createProfile(event);">
    <div class="form-group">
      <label for="fname">First Name</label>
      <input type="text" name="fname" id="fname" class="form-control">
    </div>
    <div class="form-group">
      <label for="lname">Last Name</label>
      <input type="text" name="lname" id="lname" class="form-control">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  <hr>
  <div id="result"></div>
</div>