On the 1st image link, when I click on others, a textbox will appears

But On the 2nd image link after click on Add button the textbox did not appear when click on others

$(document).ready(function() {
$('.repeater').repeater({
repeaters: [{
selector: '.inner-repeater'
}]
});
$("[data-repeater-list]").on("change", "[name*=cqualificationtxtt]", function() {
$(this).closest("div")
.find("[name*=otherqualification]")
.toggle(this.value==="others");
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
<div class="repeater wd_100">
<div data-repeater-list="data">
<div data-repeater-item class="o_h mb_15">
<div class="wd_12 fl_lf mb_33">
<label for="applicant_name" class="control-label lbl_hide"><b>Qualification</b>:</label>
<select class="form-control" data-role="select-dropdown" name="cqualificationtxtt" >
<option selected="">Select</option>
<option value="b.tech">b.tech</option>
<option value="mca">mca</option>
<option value="others">Others</option>
</select>
<input type="text" name="otherqualification" placeholder="Enter Qualification" style="display:none" />
</div>
<div class="wd_12 fl_lf mb_33">
<label for="applicant_name" class="control-label lbl_hide"><b>college</b>:</label>
<input type="text" class="form-control" placeholder="" name="collagetxt">
</div>
</div>
</div>
<input data-repeater-create type="button" class="btn btn-success" value="Add" />
</div>