jQuery Modal Problemi

<div class="kopyala">
<div class="row mb-4 sil">

<div class="border border-danger p-2 col-md-8">

<div class="row">

<div class="col-md-8">
<div class="form-group">
<label for="prjProjeKonumAd">Proje Adı</label>
<input type="text" class="form-control" id="prjProjeKonumAd" name="prjProjeKonumAd[]">
</div>
</div>

</div>

<div class="row">
<div class="col-md-8">
<div class="form-group">
<label for="prjProjeKonumTanitim">Proje Tanıtım</label>
<textarea class="form-control" name="prjProjeKonumTanitim[]" id="prjProjeKonumTanitim" rows="4"></textarea>
</div>
</div>
</div>

<div class="row">

<div class="col-md-5">
<div class="form-group">
<label for="prjProjeKonumKoordinat">Koordinatı</label>
<div class="input-group">
<input type="text" class="form-control" value="" id="prjProjeKonumKoordinat" name="prjProjeKonumKoordinat[]" readonly>
<span class="input-group-append">
<button type="button" class="btn btn-default btn-flat haritaModalButon"><i class="fas fa-map-marker-alt"></i></button>
</span>
</div>
</div>
</div>

</div>

<div class="row">
<div class="col-md-12">
<a href="javascript:void(0)" class="kopyalanani_sil float-right"><i class="fas fa-trash-alt fa-lg"></i> Sil</a>
</div>
</div>

</div>

</div>
</div>

document.addEventListener('DOMContentLoaded', function(e) {

$(".kopyala").hide();

$(".daha-fazla-ekle").click(function(){
var html = $(".kopyala").html();
$(".daha-fazlayi-ekle").after(html);
});

$("body").on("click",".kopyalanani_sil",function(){
$(this).parents(".sil").remove();
});

});

$('body').on('click', '.haritaModalButon', function(){
kodunuzu buraya yazarak denermisiniz.
});

$('body').on('click', '.haritaModalButon', function(){
kodunuzu buraya yazarak denermisiniz.
});

document.addEventListener('DOMContentLoaded', function(e) {
            
            //$('.haritaModalButon').click(function(e){
            $('body').on('click', '.haritaModalButon', function(){
                
                e.preventDefault();
                
                //LoadingOverlay Başlat
                $(function() {
                    $.LoadingOverlay("show",{
                        fade : [200, 400],
                    });
                });

                $('#haritaModal').modal('show');
                
                mapyukle();
                
                //LoadingOverlay Bitir
                $(function() {
                    $.LoadingOverlay("hide",{
                        fade : [200, 400],
                    });
                });
                
                
                $('.koorninatAl').click(function(e){
                
                    $('#haritaModal').modal('hide');
                
                });
                
                            
            });
            
});