Learning to use scripts

You see, I have the following code:

<script>
    function jmgModal(id, data, ok, cancel, input){
    data=data || {};
    id="modal-"+id;
    if(document.getElementById(id)==null){
        var d=document.createElement("div");
        d.className="jmgmodal";
        d.id=id;
        var p=document.createElement("div");
        p.className="panel";
        var t=document.createElement("div");
        t.className="title";
        var cl=document.createElement("div");
        cl.className="close";
        cl.innerHTML='&times;';
        cl.addEventListener('click',function(ev) {
            ev.preventDefault();
            var dTop=this.parentNode.parentNode;
            dTop.classList.remove("visible");
            dTop.querySelector(".panel .content").innerHTML='';
        });
        var ct=document.createElement("div");
        ct.className="content";
        var f=document.createElement("div");
        f.className="footer";
        p.appendChild(t);p.appendChild(cl);p.appendChild(ct);p.appendChild(f);
        d.appendChild(p);
        document.body.appendChild(d);
    }
    var mod=document.getElementById(id),
    p=mod.querySelector(".panel"),
    t=mod.querySelector(".panel .title"),
    ct=mod.querySelector(".panel .content"),
    f=mod.querySelector(".panel .footer");
    if (f==null) {
        mod.classList.remove("nofooter");
        var f=document.createElement("div");
        f.className="footer";
        p.appendChild(f);
    }
    t.innerHTML=data.title || '';
    ct.innerHTML=data.content || '';
    f.innerHTML='';
    if (!isNaN(data.width)) p.style.maxWidth=data.width+'px';
    if (!isNaN(data.height)) p.style.maxHeight=data.height+'vh';
    if (ok && ok.length>1) {
        var param={value:null};
        if (input && input.length>0) {
            var ph=document.createElement("p");
            ph.className="action";
            var txt=document.createElement("input");
            txt.className="action";
            txt.setAttribute("placeholder",input[0]);
            txt.addEventListener('keydown',function(ev) {
                if (ev.keyCode==13 || ev.key=="Enter") {
                    ev.preventDefault();
                    mod.classList.remove("visible");
                    ok[1](param.value);
                }
            });
            ph.appendChild(txt); ct.appendChild(ph);
            param=ct.querySelector("p.action > input.action");
            setTimeout(function(){
                param.focus();
            },100);
        }
        var bOk=document.createElement("button");
        bOk.className="action";
        bOk.innerHTML=ok[0];
        bOk.addEventListener('click',function(ev) {
            ev.preventDefault();
            mod.classList.remove("visible");
            ok[1](param.value);
        });
        f.appendChild(bOk);
    }
    if (cancel && cancel.length>1) {
        var bCancel=document.createElement("button");
        bCancel.className="action";
        bCancel.innerHTML=cancel[0];
        bCancel.addEventListener('click',function(ev) {
            ev.preventDefault();
            mod.classList.remove("visible");
            cancel[1]();
        });
        f.appendChild(bCancel);
    }
    if (f.innerHTML=='') {
        p.removeChild(f);
        mod.classList.add("nofooter");
    }
    setTimeout(function(){
        mod.classList.add("visible");
    },50);
}
</script>

This is a system to create buttons that when pressed will generate sub-windows. I mean, I have the following code:

<button onclick="jmgModal('miventana',{
title: 'Lista de fotos',
width: 100,
height: 20,
content: '<img src={{$fotos[0]->ruta()}}>'});"
>Elige una foto</button>

And it gives me this result:

I am able to create a button that opens a subwindow to which I pass a photo to show on the screen. But because it's my first time using javascript, I do not fully understand this code. On the one hand, I need to scroll through the variable $ photos to show a list of images. And on the other hand, I need to be able to choose an image to pass it to a form. This is for now the complete code of the form view:

@include('script')

@extends('layouts.app')
@section('content')
    <link rel="stylesheet" type="text/css" href=" {{ asset('css/imagen.css') }}">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Publicar un nuevo articulo</div>

                    <div class="card-body">
                        <form method="POST" action="crear_noticia" enctype="multipart/form-data">
                            @csrf

                            <input type="hidden" name="user_id" value="{{ auth()->user()->id }}"/>

                            <div class="form-group row">
                                <label for="foto_id" class="col-md-4 col-form-label text-md-right">Foto de Archivo</label>

                                <center><button onclick="jmgModal('miventana',{
                                        title: 'Lista de fotos',
                                        width: 100,
                                        height: 20,
                                content: '<img src={{$fotos[0]->ruta()}}>'});"
                                >Elige una foto</button></center>
                            </div>

                            <div class="form-group row">
                                <label for="titulo" class="col-md-4 col-form-label text-md-right">Título</label>

                                <div class="col-md-6">
                                    <input id="titulo" type="text" class="form-control{{ $errors->has('titulo') ? ' is-invalid' : '' }}" name="titulo" value="{{ old('titulo') }}" required autofocus>

                                    @if ($errors->has('titulo'))
                                        <span class="invalid-feedback">
                                            <strong>{{ $errors->first('titulo') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="texto" class="col-md-4 col-form-label text-md-right">Cuerpo de la noticia</label>

                                <div class="col-md-6">
                                    <textarea id="texto" name="texto">{{old('texto')}}</textarea>

                                    @if ($errors->has('texto'))
                                        <span class="invalid-feedback">
                                            <strong>{{ $errors->first('texto') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row mb-0">
                                <div class="col-md-6 offset-md-4">
                                    <button type="submit" class="btn btn-primary">
                                        Subir Articulo
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

script is where I have the javascript code.

PS: For what it's worth, the code .css:

.jmgmodal {
position: fixed; margin: auto;
top:0;left:0;right:0;bottom:0;
background: rgba(34,34,68,.8);
box-sizing: content-box;
visibility: hidden; opacity: 0;
transition: all .12s; z-index: 99;
}
.jmgmodal.visible {
visibility: visible; opacity: 1;
}
.jmgmodal * {box-sizing: inherit}
.jmgmodal .panel {
position: absolute; margin: auto;
top:0;left:0;right:0;bottom:0;
max-width: 600px; max-height: 70vh;
background: #0ebeff; border-radius: 10px;
color: #000; padding: 50px 0;
transform: translateY(-25%);
transition: all .12s;
}
.jmgmodal.nofooter .panel {
padding: 50px 0 0 0;
}
.jmgmodal.visible .panel {
transform: none;
}
.jmgmodal .title {
position: absolute; top: 0;
width: 100%; height: 50px;
line-height: 50px;
background: orange;
font-weight: bolder; padding: 0 2em;
box-shadow: 2px 0 10px rgba(0,0,0,.6);
border-radius: 10px 10px 0 0;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.jmgmodal .panel .close {
position: absolute; top: .25em; right: .75em;
cursor: pointer; font-size: 25px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.jmgmodal .panel .content {
max-height: 100%; overflow: auto;
padding: 1em; box-sizing: border-box;
}
.jmgmodal .panel .content iframe:only-child {
border: 0; width: 100%;
height: 100%; height: 80vh;
min-height: 200px;
}
.jmgmodal .panel .content img:only-child {
width: 100%; max-width: 100%;
}
.jmgmodal .panel .footer {
position: absolute; bottom: 0;
width: 100%; background: orange;
font-weight: bolder; padding: 0 .5em;
box-shadow: 2px 0 10px rgba(0,0,0,.6);
border-radius: 0 0 10px 10px;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-align: right;
}
.jmgmodal .panel .footer .action {
border-radius: 10px; color: #000;
background: #fff; border: 0;
min-width: 80px; min-height: 35px;
font-weight: bold; cursor: pointer;
margin-left: 20px;
transition: all .12s;
}
.jmgmodal .panel .footer .action:hover {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
}

/* estilos del pen, ornamentales */
html {
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #224;
  text-align: center;
  font-variant: small-caps;
}
h1 {
  font-weight: 400;
}
button {
  border: 3px solid #224;
  background: #fff;
  padding: 1rem;
  margin: 1rem .5rem;
  font-size: 1.2rem;
  font-variant: small-caps;
  transition: all .5s;
  cursor: pointer;
  box-shadow: inset 0 0 0 rgba(0,0,0,1);
}
button:hover {
  color: #fff;
  box-shadow: inset 0 0 0 10rem rgba(34, 34, 65, .68);
}