if checkbox checked enable his textarea - php

Question

in this php code i have foreach loop create textarea with checkbox for each statement
i wanna to enable textarea if his checkbox is checked
but they have same id
<?php
foreach($Arows as $row){
echo '<tr class="row">
<th class="col-sm-12"><h4>'.$row['Type_A'].'</h4></th>
</tr>';
$stmt3 = $con->prepare("SELECT * FROM sous_analyse WHERE Id_A =".$row['Id_A']);
$stmt3->execute();
$SArows = $stmt3->fetchAll();//Analyse rows
foreach($SArows as $Srow){
echo '<tr class="row">
<td class="col-sm-4">'.$Srow['Parameter'].'</td>
<td class=" col-sm-5"><input type="text" class="form-control col-xl-12 border-secondary" name="Fonctionnalite" placeholder="RESULTATS" required=""></td>
<td class="col-sm-3 text-center">'.$Srow['Normal'].'</td>
</tr>';
}
echo '<tr class="row">
<th class="col-sm-12">
<div class="input-group">
<span class="input-group-addon form-check">
<span class="checkbox-custom checkbox-default">
<input type="checkbox" class="icheckbox-grey" id="inputUnchecked" name="inputUnchecked">
<label for="inputUnchecked"></label>
</span>
</span>
<textarea class="form-control" id="textareaDefault" rows="3" style="margin-top: 0px; margin-bottom: 0px; height: 60px;" disabled></textarea>
</div>
</th>
</tr>';
}
?>
i use this script but is working in first textarea
<script >
$(document).ready(function() {
$("#inputUnchecked").on('click', function() {
if($(this).is(':checked')){
$("#textareaDefault").prop('disabled',false);
} else {
$("#textareaDefault").prop('disabled',true);
}
alert("fdg");
})
});
</script>

Answer 1

Expanding on my comment, you will want to adjust your PHP. This is easily done with a counter ($c).
<?php
foreach($Arows as $row){
$html = "";
$html .= '<tr class="row">'."\r\n";
$html .= '<th class="col-sm-12"><h4>'.$row['Type_A'].'</h4></th>'."\r\n";
$html .= '</tr>'."\r\n";
$stmt3 = $con->prepare("SELECT * FROM sous_analyse WHERE Id_A =".$row['Id_A']);
$stmt3->execute();
$SArows = $stmt3->fetchAll();
$c = 1;
foreach($SArows as $Srow){
$html .= '<tr class="row">'."\r\n";
$html .= '<td class="col-sm-4">'.$Srow['Parameter'].'</td>';
$html .= '<td class=" col-sm-5"><input type="text" class="form-control col-xl-12 border-secondary" name="Fonctionnalite" placeholder="RESULTATS" required=""></td>';
$html .= '<td class="col-sm-3 text-center">'.$Srow['Normal'].'</td>';
$html .= '</tr>';
}
$html .= '<tr class="row">';
$html .= '<th class="col-sm-12">';
$html .= '<div class="input-group">';
$html .= '<span class="input-group-addon form-check">';
$html .= '<span class="checkbox-custom checkbox-default">';
$html .= '<input type="checkbox" class="icheckbox-grey" id="inputUnchecked-$c" name="inputUnchecked">';
$html .= '<label for="inputUnchecked-$c"></label>';
$html .= '</span></span>';
$html .= '<textarea class="form-control" id="textareaDefault-$c" rows="3" style="margin-top: 0px; margin-bottom: 0px; height: 60px;" disabled></textarea>';
$html .= '</div></th></tr>';
echo $html;
$c++;
}
?>
Your JavaScript can then use the ID since it is unique or can simply be relative to nearby elements.
$(function() {
$("[id^='inputUnchecked-']").on('click', function() {
if($(this).is(':checked')){
$(this).parent().parent().find("[id^='textareaDefault-']").prop('disabled',false);
} else {
$(this).parent().parent().find("[id^='textareaDefault-']").prop('disabled',true);
}
alert("fdg");
})
});