javascript bugs multiplying layouts

Question

I seem to have encountered problem, i do not know the exact cause as my code seem okay

this is the effect of the bug

this is my console

now here is how my scripts are called

 <script src="{{ asset('public/libs/jquery/jquery/dist/jquery.js') }}"> 
 </script>
<!-- Bootstrap -->
<script src="{{ asset('public/libs/jquery/tether/dist/js/tether.min.js') }}"></script>

<script src="{{ asset('public/scripts/config.lazyload.js') }}"></script>

<script src="{{ asset('public/scripts/palette.js') }}"></script>
<script src="{{ asset('public/scripts/ui-load.js') }}"></script>
<script src="{{ asset('public/scripts/ui-jp.js') }}"></script>
<script src="{{ asset('public/scripts/ui-include.js') }}"></script>
<script src="{{ asset('public/scripts/ui-device.js') }}"></script>
<script src="{{ asset('public/scripts/ui-form.js') }}"></script>
<script src="{{ asset('public/scripts/ui-nav.js') }}"></script>
<script src="{{ asset('public/scripts/ui-screenfull.js') }}"></script>
<script src="{{ asset('public/scripts/ui-scroll-to.js') }}"></script>
<script src="{{ asset('public/scripts/ui-toggle-class.js') }}"></script>
<script src="{{ asset('public/libs/notify.js') }}"></script>

 <script src="{{ asset('public/scripts/app.js') }}"></script>

<!-- ajax -->
<script src="{{ asset('public/libs/jquery/jquery-pjax/jquery.pjax.js') }}"></script>
<script src="{{ asset('public/scripts/ajax.js') }}"></script>
<script>
 $.ajaxSetup({
     headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     }
  });


function initiateNext(){
    var pos = document.getElementById('number').value;
    if(pos == 1){
      //check if email has been entered
      var code = document.getElementById('code-value').value;
      if(code !== ""){
          $.post('check-code', {coder : code}, function(res){
              if(res){
                res = JSON.parse(res);
                if(res.type == 1){
                   document.getElementById('code').style.display = "none";
                  document.getElementById('country').style.display = "block";
                  document.getElementById('number').value = 2;
                  $.notify(res.message, "success");
                }
                // console.log(res)
                if(res.type ==  2){
                  $.notify(res.message, "error");
                }
              }
          });


      } else {
        //throw error
      }
    }

    if(pos == 2){
      //submit detail then enter verification

    }
}
</script>

please take note that I also have a registration page that looks exactly like this but it does not bring this error up. I dont know if anybody has encountered such a problem please point me in the right direction of solving this

Answer 1

this atribute was missing a file to include

so I placed a file in between the quotes just like in the other files that werent having this issue

and this solved the problem.