JavaScript çakışması var nasıl çözerim

iki aynı javascript kodunun aynı sayfada kullanmam lazım çakışma oluyor büyük ihtimal ama sorunu çözemedim yardımcı olursanız sevinirim şimdiden teşekkürler.

                                            <div class="col-lg-8 col-md-12">
                                                 <div class="form-group">
                                                    <a class="btn btn-primary" data-bs-target="#modalQuill" data-bs-toggle="modal" href="javascript:void(0)">Öğrenci QR Tara</a>
                                                </div>
                                           </div>
                                             <div class="col-lg-8 col-md-12">
                                                 <div class="form-group">
                                                    <a class="btn btn-primary" data-bs-target="#modalQuill2" data-bs-toggle="modal" href="javascript:void(0)">Sınıf QR Tara</a>
                                                </div>
                                           </div>

    <!--Modal ogrenci-->
    <div class="modal fade" id="modalQuill">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header pd-20">
                    <h6 class="modal-title">Öğrenci QR</h6><button aria-label="Close" class="btn-close" data-bs-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                </div>
                <div align="center">
                <video id="preview" width="50%" height="50%"></video>
                </div>
                <div class="modal-footer pd-20">
                   <button class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">Kapat</button>
                </div>
            </div>
        </div>
    </div>
    <!--/Modal-->  
    <!--Modal arac-->
    <div class="modal fade" id="modalQuill2">
        <div class="modal-dialog modal-dialog-centered" role="document2">
            <div class="modal-content">
                <div class="modal-header pd-20">
                    <h6 class="modal-title">Sınıf QR</h6><button aria-label="Close" class="btn-close" data-bs-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                </div>
                <div align="center">
                <video id="preview2" width="50%" height="50%"></video>
                </div>
                <div class="modal-footer pd-20">
                   <button class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">Kapat</button>
                </div>
            </div>
        </div>

<script>
    let scanner = new Instascan.Scanner({ video: document.getElementById('preview')});
    Instascan.Camera.getCameras().then(function(cameras){
    if(cameras.length > 0 ){
            scanner.start(cameras[0]);
        }else{
            alert('No cameras found');
        }
    }).catch(function(e) {
        console.error(e);
    });
    scanner.addListener('scan',function(c){
        document.getElementById('text').value=c;
    });
</script>    
    <!--/Modal-->
<script>
    let scanner = new Instascan.Scanner({ video: document.getElementById('preview2')});
    Instascan.Camera.getCameras().then(function(cameras){
    if(cameras.length > 0 ){
            scanner.start(cameras[0]);
        }else{
            alert('No cameras found');
        }
    }).catch(function(e) {
        console.error(e);
    });
    scanner.addListener('scan',function(c){
        document.getElementById('text1').value=c;
    });
</script>

<script>
    let scanner = new Instascan.Scanner({ video: document.getElementById('preview')});
    Instascan.Camera.getCameras().then(function(cameras){
    if(cameras.length > 0 ){
            scanner.start(cameras[0]);
        }else{
            alert('No cameras found');
        }
    }).catch(function(e) {
        console.error(e);
    });
    scanner.addListener('scan',function(c){
        document.getElementById('text').value=c;
    });
</script>    
    <!--/Modal-->
<script>
    let scanner_ = new Instascan.Scanner({ video: document.getElementById('preview2')});
    Instascan.Camera.getCameras().then(function(cameras){
    if(cameras.length > 0 ){
            scanner_.start(cameras[0]);
        }else{
            alert('No cameras found');
        }
    }).catch(function(e) {
        console.error(e);
    });
    scanner_.addListener('scan',function(c){
        document.getElementById('text1').value=c;
    });
</script>

böyle deneyin hocam.

Merhabalar
Öncelikle ilginiz için teşekkürler QR kodlarını okutuyorum ama alttaki satırlara ayrı ayrı yazmasını isterken hangisini taratırsam onun bilgisini yazıyor. name ve id farklı neden yapıyor anladım bir de bu konuda yardımcı olursanız sevinirim

                                            <div class="col-lg-8 col-md-12">
                                                <div class="form-group">
                                                    <label for="exampleInputname1">Öğrenci Adi</label>
                                                    <input type="text" name="text" id="text" class="form-control" id="exampleInputname1" disabled="disabled">
                                                </div>
                                            <div class="col-lg-8 col-md-12">
                                                <div class="form-group">
                                                    <label for="exampleInputname1">Sınıf Adı</label>
                                                    <input type="text1" name="text1" id="text1" class="form-control" id="exampleInputname2" disabled="disabled">
                                                </div>
                                            </div>