My current task involves fetching multiple data from a database using AJAX and PHP. Once I retrieve the data successfully, I need to group the results in a specific format like the images shown below, including having a textarea field for each group.
Here is the script I am currently using:
function getResult(id = null) {
if (id) {
$.ajax({
url: 'fetch.php',
type: 'post',
data: {id: id},
dataType: 'json',
success: function(response) {
var lastCategory = null;
response.result.forEach(function(element) {
console.log(element);
var category = element.category;
var names = element.name;
var Result = element.result;
var note = element.note;
if (lastCategory != category) {
$('table tr').length;
html = '<tr>';
html += '<td><p>'+category+'</p></td>';
html += '</tr>';
$('table').append(html);
lastCategory = category;
}
$('table tr').length;
html = '<tr>';
html += '<td><p>' + names + '</p></td>';
html += '<td><p>' + Result + '</p></td>';
html += '</tr>';
$('table').append(html);
$('table tr').length;
html = '<tr>';
html += '<td><textarea placeholder="textarea...">' + note + '</textarea></td>';
html += '</tr>';
$('table').append(html);
});
}
});
} else {
alert('error');
}
}
However, the current output is not as desired. You can see it here:
https://i.sstatic.net/60a7G.png
This is the expected output that I am aiming for: