<% provide(:title, "Edit account") %>
<% provide(:button_text, "Save changes") %>
<% provide(:path, user_path(@user)) %>
<% provide(:verb, :patch) %>

<h1>Your account</h1>
<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= render 'form' %><br>
    <p class="center">To see a list of all your payments, click the following button... </p>
    <button class="btn btn-info btn-block js-payments" data-toggle="collapse" data-target="#payments">
      Payment$
    </button>
    <div class="collapse" id="payments">
      <div class="well">
      </div>
    </div>
  </div>
</div>



<script type="text/javascript" charset="utf-8">
$(function () {
  $(".js-payments").on('click', function(event) {
    event.preventDefault();
    $.get("/payments", function(payments) {
      var paymentsString = "";
      $.each(payments, function(i, payment) {
        var dateTime = new Date(payment["created_at"]);
        var day = dateTime.getDate();
        var month = dateTime.getMonth() + 1;
        var year = dateTime.getFullYear();
        paymentsString += `<p data-paymentid="${payment["id"]}">` + "$" + `${payment["amount"]} ` + "spent at " + `${payment["store"]} ` + "on " + `${day}/${month}/${year}` + "</p>";
      });
      $(".well").html(paymentsString);
    });
  });
});
</script>

<% provide(:title, "Edit account") %>
<% provide(:button_text, "Save changes") %>
<% provide(:path, user_path(@user)) %>
<% provide(:verb, :patch) %>

<h1>Your account</h1>
<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= render 'form' %><br>
    <p class="center">To see a list of all your payments, click the following button... </p>
    <button class="btn btn-info btn-block js-payments" data-toggle="collapse" data-target="#payments">Payment$</button>
    <div class="collapse" id="payments">
      <div class="well">
      </div>
    </div>
  </div>
</div>



<script type="text/javascript" charset="utf-8">
$(function () {
  $(".js-payments").on('click', function(event) {
    event.preventDefault();
    $.get("/payments", function(payments) {
      var paymentsString = "";
      $.each(payments, function(i, payment) {
        var dateTime = new Date(payment["created_at"]);
        var day = dateTime.getDate();
        var month = dateTime.getMonth() + 1;
        var year = dateTime.getFullYear();
        paymentsString += `<p data-paymentid="${payment["id"]}">` + "$" + `${payment["amount"]} ` + "spent at " + `${payment["store"]} ` + "on " + `${day}/${month}/${year}` + "</p>";
      });
      $(".well").html(paymentsString);
    });
  });
});
</script>

Make aesthetic modification to Users edit view
Make aesthetic modification to Users edit view
