I need to transfer data from my HTML table to my modal(I am not using bootstrap). As you can see from the image below, I displayed the data from my MySQL database into the table.
The problem is when I click the EDIT button of the 1st row the data will be transferred to my modal. However, when I click the EDIT button of the 2nd row the data transferred to my modal is still the data of the 1st row. Please help me in fixing this problem. I am still learning PHP and JavaScript.
Table Data Generation Here | Modal Here
PHP Code:
while ($row = mysqli_fetch_array($result)) {
echo "<tr class='table-row'>
<td class='table-cell'>".$row['program']."</td>
<td class='table-cell'>".$row['project_name']."</td>
<td class='table-cell'>".$row['department']."</td>
<td class='table-cell'>".$row['start_date']."</td>
<td class='table-cell'>".$row['end_date']."</td>
<td class='table-cell'><span style='color:".$color."'><i class='fa fa-circle-o'></i></span> ".$row['priority']."</td>
<td class='table-cell'><span style='color:".$color_2."'><i class='fa fa-circle-o'></i></span> ".$row['status']."</td>
<td class='table-cell'><a id='edit-modal-show' class='btn btn-edit'>Edit</a>
<div class='editProject-modal' id='edit-project-modal'>
<div class='editProject-modal-dialog'>
<div class='editProject-modal-content'>
<div class='editProject-onboard'>
<header class='onboard-header'>
<h1 class='onboard-title'>Edit Project</h1>
<button class='onboard-close-2'>
<i class='fa fa-close'></i>
</button>
</header>
<div class='onboard-body'>
<form autocomplete='off' method='POST'>
<input type='hidden' id='".$row['project_id']."' name='p-id' value=".$row['project_id'].">
<div class='row'>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Program</label>
<input type='text' placeholder='Program' name='program' id='pr-".$row['project_id']."' class='form-control' value='".$row['program']."' required>
</div>
</div>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Project Name</label>
<input type='text' placeholder='Project Name' name='pname' id='pn-".$row['project_id']."' class='form-control' value='".$row['project_name']."' required>
</div>
</div>
</div>
<div class='row'>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Project Description</label>
<textarea type='text' placeholder='Project Description' name='description' id='desc-".$row['project_id']."' class='form-control' required>".$row['description']."</textarea>
</div>
</div>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Lead Department</label>
<select class='form-control' name='department' required>
<option value=''>Department</option>";
if ($count_2> 0) {
while ($row_2 = mysqli_fetch_array($result_2)) {
if ($row_2['department'] == $row['department']){
$selected = "selected";
}
else {
$selected = "";
}
echo "<option value='".$row_2['department']."'".$selected.">".$row_2['department']."</option>";
}
}
echo"</select>
</div>
</div>
</div>
<div class='row'>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Start Date</label>
<input type='date' name='s-date' id='s-date-".$row['project_id']."' class='form-control' value='".$row['start_date']."' required>
</div>
</div>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>End Date</label>
<input type='date' name='e-date' id='e-date-".$row['project_id']."' class='form-control' value='".$row['end_date']."' required>
</div>
</div>
</div>
<div class='row'>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Priority</label>
<select class='form-control' name='priority' id='priority' required>
<option value=''>Priority</option>";
if ($count_3 > 0) {
while ($row_3 = mysqli_fetch_array($result_3)) {
if ($row_3['priority'] == $row['priority']){
$selected = "selected";
}
else {
$selected = "";
}
echo "<option value='".$row_3['priority']."'".$selected.">".$row_3['priority']."</option>";
}
}
echo "</select>
</div>
</div>
<div class='column-2'>
<div class='onboard-btn'>
<button type='submit' class='btn btn-update' name='update'>Update</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</td>
<td class='table-cell'><a href='delete.php?del=".$row['project_id']."' class='btn btn-delete'>Delete</i></a></td>
</tr>";
}
Javascript:
/* Edit Project Modal Event */
var modal_edit = document.getElementById('edit-project-modal');
var span_edit = document.getElementsByClassName("onboard-close-2")[0];
$(document).on('click',".btn-edit",function(){
$(modal_edit).toggleClass("edit-modal-show");
});
span_edit.onclick = function() {
$(modal_edit).removeClass("edit-modal-show");
}