I have a form that i take inputs and i use a script to copy my form when add button is clicked. There is a radiobutton in my form which contains a hidden textarea. Whenever i choose value="uygunDegil" , that textarea changes to visible. The problem is when i append my copy form, i won't be able to access my copy radiobutton with my function,lets say i choose value="uygunDegil" on my 5th copy field my first hidden textarea turns to visible instead of 5th one. I need to add some kind of id and iterate it to my form dynamically or to my radiobutton but i don't know how to. I'm new to JS so any help or advice would be appreciated.
Form.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>
copy of my form that i append
<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>
fields.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';
}
