JSFiddle - React, Tailwind, and code Playground

by Dmitri Ganenco

HTML

<div class="panel panel-info">
  <div class="panel-heading text-center">Past measurements</div>
  <div class="panel-body">
    <table class="table table-striped" id="measurements">
      <thead class="thead-dark">
        <th scope="col">Date</th>
        <th scope="col">Weight</th>
        <th scope="col">Waist</th>
        <th scope="col">Systolic (Upper)</th>
        <th scope="col">Diastolic (Lower)</th>
        <th scope="col">Comment</th>
        <th scope="col">Action</th>
      </thead>
      <tbody>
      </tbody>
    </table>
    <div class="row">&nbsp;</div>
  </div>
</div>

JavaScript

const result = [{
    weigh_date: '01/01/2019',
    weight: '200lbs',
    id: 1,
    waist: 'waist',
    upperBp: 'upperBp',
    lowerBp: 'lowerBp',
    comment: 'comment'
  },
  {
    weigh_date: '01/01/2015',
    weight: '100lbs',
    id: 2,
    waist: 'waist',
    upperBp: 'upperBp',
    lowerBp: 'lowerBp',
    comment: 'comment'
  }
];

function buildTable() {
  if (result != null) {
    $('#measurements tbody tr').remove();
    result.forEach(function(measurement) {
      var message = "<tr><td>" + measurement.weigh_date + "</td>";
      message += "<td>" + measurement.weight + "</td>";
      message += "<td><input type='hidden' value='" + measurement.id + "'>" + measurement.waist + "</td>";
      message += "<td>" + measurement.upperBp + "</td>";
      message += "<td>" + measurement.lowerBp + "</td>";
      message += "<td>" + measurement.comment + "</td>";
      message += "<td><button type='button' class='btn btn-edit btn-outline-warning' id='" + measurement.id + "'>Edit</button>&nbsp;";
      message += "<button type='button' class='btn btn-delete btn-outline-danger' id='" + measurement.id + "'>Remove</button></td></tr>";
      $('#measurements').append(message);
    });
  }
}

$('#measurements').on('click', '.btn-edit', function() {
	const id = $(this).attr('id');
	
	console.log('ID to be edited: ' + id);
});


$('#measurements').on('click', '.btn-delete', function() {
	const id = $(this).attr('id');
	
	console.log('ID to be deleted: ' + id);
});


buildTable();