У меня есть форма, которую я беру на входе, и я использую скрипт, чтобы скопировать мою форму при нажатии кнопки добавления. В моей форме есть радио-кнопка, которая содержит скрытую текстовую область. Всякий раз, когда я выбираю value="uygunDegil", это текстовое поле меняется на видимое. Проблема в том, что, когда я добавляю свою форму для копирования, я не смогу получить доступ к своему радиокнопке с моей функцией, скажем, я выбрал value="uygunDegil" в поле 5-й копии, моя первая скрытая текстовая область становится видимой, а не 5-й. Мне нужно добавить какой-то идентификатор и итерировать его в моей форме динамически или в радиокнопке, но я не знаю, как это сделать. Я новичок в JS, поэтому любая помощь или совет будут оценены.
Форма. php
<form method="post">
<div class="form-group row">
<div class="col-auto">
<label for="ad">Ad</label>
<input type="text" name="ad[]" class="form-control" id="ad" placeholder="Öğrencinin Adı"/>
<label for="soyad">Soyad</label>
<input type="text" name="soyad[]" class="form-control" id="soyad" placeholder="Öğrencinin Soyadı"/>
<label for="no">No</label>
<input type="text" name="numara[]" class="form-control" id="no" placeholder="Öğrencinin Numarası">
<label for="course">Bölümü</label>
<input type="text" name="bolum[]" class="form-control" id="course" placeholder="Öğrencinin Bölümü">
<label for="alKredi">Almak İstediği Kredi</label>
<input type="text" name="alKredi[]" class="form-control" id="alKredi" placeholder="Almak İstediği Kredi">
<label for="verKredi">Alabileceği Kredi</label>
<input type="text" name="verKredi[]" class="form-control" id="verKredi" placeholder="Alabileceği Kredi">
<label for="evetKontrol">Evet</label>
<input type="radio" id="evetKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygun" checked>
<label for="hayirKontrol">Hayır</label>
<input type="radio" id="hayirKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygunDegil">
<div id="ifNo" style="visibility:hidden">
<strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep" name="hayirSebep" style="height: 75px"><br>
</div>
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
копия моей формы что я добавляю
<div class="form-group rowCopy" style="display: none;">
<div class="col-auto">
<label for="ad">Ad</label>
<input type="text" name="ad[]" class="form-control" id="ad" placeholder="Öğrencinin Adı"/>
<label for="soyad">Soyad</label>
<input type="text" name="soyad[]" class="form-control" id="soyad" placeholder="Öğrencinin Soyadı"/>
<label for="no">No</label>
<input type="text" name="numara[]" class="form-control" id="no" placeholder="Öğrencinin Numarası">
<label for="course">Bölümü</label>
<input type="text" name="bolum[]" class="form-control" id="course" placeholder="Öğrencinin Bölümü">
<label for="alKredi">Almak İstediği Kredi</label>
<input type="text" name="alKredi[]" class="form-control" id="alKredi" placeholder="Almak İstediği Kredi">
<label for="verKredi">Alabileceği Kredi</label>
<input type="text" name="verKredi[]" class="form-control" id="verKredi" placeholder="Alabileceği Kredi">
<?php echo '<strong>Uygun mu?</strong><br><br>'; ?>
<label for="evetKontrol">Evet</label>
<input type="radio" id="evetKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygun" checked>
<label for="hayirKontrol">Hayır</label>
<input type="radio" id="hayirKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygunDegil">
<div id="ifNo" style="visibility:hidden">
<strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep" name="hayirSebep" style="height: 75px"><br>
</div>
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
</div>
</div>
</div>
полей. js
$(document).ready(function() {
//group add limit
var maxGroup = 25;
//add more fields group
$(".addMore").click(function() {
if ($('body').find('.row').length < maxGroup) {
var fieldHTML = '<div class="form-group row">' + $(".rowCopy").html() + '</div>';
$('body').find('.row:last').after(fieldHTML);
} else {
alert('Maximum ' + maxGroup + ' groups are allowed.');
}
});
//remove fields group
$("body").on("click", ".remove", function() {
$(this).parents(".row").remove();
});
});
function yesnoCheck() {
if (document.getElementById('evetKontrol').checked) {
document.getElementById('ifNo').style.visibility = 'hidden';
} else document.getElementById('ifNo').style.visibility = 'visible';
}
JS скрипка для демонстрации