Every time the user clicks + a new row is added and when the user clicks x a new row is deleted user interface. There are four dropdowns. Month(single select) , Year(single select) , Main reason (single select), Secondary reason(multiple select). Main and secondary have the same id because they need to be inserted in the same column in database table structure
With the current code,only the first row inserted in database is correct (see second image). Everything else is messed up
PHP
if (isset($_POST[‘acute_id’]) && !empty($_POST[‘month_acute’]) && !empty($_POST[‘year_acute’]) ){
array_push ($variations_cols, $db -> quoteName ('update_id') . ',' . $db -> quoteName ('acute_id')
. ',' . $db -> quoteName ('month_acute'). ',' . $db -> quoteName ('year_acute'));
$unique_genes = array_unique ($_POST['acute_id'], SORT_NUMERIC); //remove duplicate genes
$unique_keys = array_keys ($unique_genes); // keys of unique values
for ($i = 0; $i < count ($unique_genes); $i ++){
array_push ($variations_vals, $db -> quote ($updated_id) . ',' . $db -> quote ($_POST['acute_id'][$i])
. ',' . $db -> quote ($_POST['month_acute'][$i]). ',' . $db -> quote ($_POST['year_acute'][$i]) );
}
insertIntoTable ($db, "patient_has_ac2", $variations_cols, $variations_vals);
}
HTML
<table id='acuteTable' class='table table-borderless acute_events_table enrol_dataset' style='display: none;'>
<thead>
</thead>
<tbody>
<tr class='acute_class text-center' style='display: none;'>
<th><label class='fw-bold control-label'><i class='error_asterisk'>*</i> Hospitalization/Emergency Admission Date</label></th>
<th><label class='fw-bold control-label'><i class='error_asterisk'>*</i> Main reason for each Hospitalization/Emergency admission</label></th>
<th><label class='fw-bold control-label'><i class='error_asterisk'>*</i> Secondary reason(s) for each Hospitalization/Emergency admission</label></th>
<th><button id='add_acute' type='button' class='btn btn-success'><i class='fa fa-plus'></i></button></th>
</tr>
<tr class='acute_class text-center' style='display: none;'>
<td class='form-group'>
<div class="row">
<select id='month_acute' name='month_acute[]' class='acute_date check_current_date month_check select2_cls form-control' style='width: fit-content;'>
<option value=''>Month</option>
<?php echo $month_list; ?>
</select>
<select id='year_acute' name='year_acute[]' class='acute_date check_current_date year_check select2_cls form-control' style='width: fit-content;'>
<option value=''>Year</option>
<?php echo $year_list; ?>
</select>
</div>
</td>
<td class='form-group'>
<select id="select_other_primary1" name='acute_id[]' class='select2_cls acute_diagnosis genes form-control' style='width: 100%;'>
<?php echo $acute_complications; ?>
</select>
<div class='invalid-feedback feedback-icon'><i class='fa fa-times'></i> This is a <strong>mandatory</strong> field.</div>
<div class="other_primary1" style="display: none;">
<label class="control-label" for="transfusion_sel_past">
<i class="error_asterisk">*</i> Other main reason :
</label>
<textarea id="other_blood1" name="other_blood" class="form-control"></textarea>
</div>
</td>
<td class='form-group'>
<select name='acute_id[]' id="select_other_secondary2" class='select2_cls acute_diagnosis genes form-control' style='width: 100%;' multiple>
<?php echo $acute_complications; ?>
</select>
<div class='invalid-feedback feedback-icon'><i class='fa fa-times'></i> This is a <strong>mandatory</strong> field.</div>
<div class="other_secondary2" style="display: none;">
<label class="control-label" for="other_secondary2">
<i class="error_asterisk">*</i> Other secondary reason :
</label>
<textarea id="other_secondary_textarea2" name="other_secondary_textarea2" class="form-control"></textarea>
</div>
</td>
<!-- <td class='form-group'>
<select name='acute_secondary[]' class='select2_cls genotype_diagnosis allele_variations vars_select2 form-control' style='width: 100%;' data-placeholder='Select gene first'></select>
<div class="new_variation2" style="display: none;">
<input type="text" name="new_variation[]" class="new_variation_input2">
</div>
<div class='invalid-feedback feedback-icon'><i class='fa fa-times'></i> This is a <strong>mandatory</strong> field.</div>
</td> -->
</tr>
</tbody>
</table>
jQuery for adding rows
$('#add_acute').off('click').on('click', function () {
var acute_options = <?php echo json_encode ($acute_complications, JSON_UNESCAPED_SLASHES); ?>;
var month_options = <?php echo json_encode ($month_list, JSON_UNESCAPED_SLASHES); ?>;
var year_options = <?php echo json_encode ($year_list, JSON_UNESCAPED_SLASHES); ?>;
$(".acute_events_table > tbody:last-child").append(
'<tr class="acute_class text-center">' +
'<td class="form-group">' +
'<div class="row"> <select id="month_acute" name="month_acute[]" class="acute_date check_current_date month_check select2_cls form-control" data-placeholder="Month" style="width: fit-content;" ><option value="">Month</option>' +
month_options + '</select><select id="year_acute" name="year_acute[]" class="acute_date check_current_date year_check select2_cls form-control" data-placeholder="Year" style="width: fit-content;" ><option value="">Year</option>' +
year_options + '</select> </div>' +
'<div class="invalid-feedback feedback-icon"><i class="fa fa-times"></i> This is a <strong>mandatory</strong> field.</div>' +
'</td>'+
'<td class="form-group">' +
'<select name="acute_id[]" id="select_other_primary" class="select2_cls vars_select1 allele_variations acute_diagnosis form-control" style="width: 100%;" data-placeholder="Main reason" required>'+acute_options +'</select>' +
'<div class="other_primary" style="display: none;" >' +
'<label class="control-label" for="other_primary_textarea"><i class="error_asterisk">*</i> Other main reason :</label>'+
'<textarea id="other_primary_textarea" name="other_primary_textarea" class="form-control"></textarea>' +
'</div>' +
'<div class="invalid-feedback feedback-icon"><i class="fa fa-times"></i> This is a <strong>mandatory</strong> field.</div>' +
'</td>'+
'<td class="form-group">' +
'<select name="acute_id[]" id="select_other_secondary" class="select2_cls vars_select2 allele_variations acute_diagnosis form-control" style="width: 100%;" data-placeholder="Secondary reason" required multiple>'+acute_options +'</select>' +
'<div class="other_secondary" style="display: none;" >'+
'<label class="control-label" for="other_secondary_textarea"><i class="error_asterisk">*</i> Other secondary reason :</label>'+
'<textarea id="other_secondary_textarea" name="other_secondary_textarea" class="form-control"></textarea>'+
'</div>'+
'<div class="invalid-feedback feedback-icon"><i class="fa fa-times"></i> This is a <strong>mandatory</strong> field.</div>' +
'</td>'+
'<td><button type="button" class="btn btn-danger delete_row delete_row_causatives"><i class="fa fa-remove"></i></button></td>' +
'</tr>'
);
$(".select2_cls").select2({width: 'resolve'}); //initialize select2 dropdowns
});