I would need help with this problem that I don't know how it would be, I have doctor's office hours, for example MEDICO1 has office hours from 8 to 13 and 16 to 20 every 15 minutes , these are shown in a SPAN within a DIV that says schedules as in the image below.
I would like that when selecting a doctor and his attention schedules I calculate and put them correlatively in those SPAN. For example, if I select a DOCTOR who has hours from 8 to 12 every 15 minutes in the SPAN, I should put 8:00 8:15 8:30 8:45 9:00 and successively.
This is possible? I thank you for your cooperation and knowledge. THANK YOU
Here I have the html code where the shifts appear.
Shift List <!--CONTENEDOR TURNO MAÑANA-->
<div class="row">
<div class="col-xl-6">
<div class="card mb-1">
<div class="card-header bg-white text-center" id="tmanana"><i class="fas far fa-calendar-alt mr-1"></i><h5>Turno Mañana</h5></div>
<div class="input-group mb-2">
<span class="input-group-text">8:00 a.m</span>
<input onclick="activareditarturnomtext(1)" id="texto-1" type="text" class="form-control" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(1)" disabled type="button" id="boton-1">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">8:15 a.m</span>
<input onclick="activareditarturnomtext(2)" type="text" class="form-control" id="texto-2" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(2)" disabled type="button" id="boton-2">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">8:30 a.m</span>
<input onclick="activareditarturnomtext(3)" type="text" class="form-control" id="texto-3" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(3)" disabled type="button" id="boton-3">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">8:45 a.m</span>
<input onclick="activareditarturnomtext(4)" type="text" class="form-control" id="texto-4" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(4)" disabled type="button" id="boton-4">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">9:00 a.m</span>
<input onclick="activareditarturnomtext(5)" type="text" class="form-control" id="texto-5" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(5)" disabled type="button" id="boton-5">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">9:15 a.m</span>
<input onclick="activareditarturnomtext(6)" type="text" class="form-control" id="texto-6" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(6)" disabled type="button" id="boton-6">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">9:30 a.m</span>
<input onclick="activareditarturnomtext(7)" type="text" class="form-control" id="texto-7" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(7)" disabled type="button" id="boton-7">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">9:45 a.m</span>
<input onclick="activareditarturnomtext(8)" type="text" class="form-control" id="texto-8" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(8)" disabled type="button" id="boton-8">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">10:00 a.m</span>
<input onclick="activareditarturnomtext(9)" type="text" class="form-control" id="texto-9" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(9)" disabled type="button" id="boton-9">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">10:15 a.m</span>
<input onclick="activareditarturnomtext(10)" type="text" class="form-control" id="texto-10" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(10)" disabled type="button" id="boton-10">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">10:30 a.m</span>
<input onclick="activareditarturnomtext(11)" type="text" class="form-control" id="texto-11" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(11)" disabled type="button" id="boton-11">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">11:00 a.m</span>
<input onclick="activareditarturnomtext(12)" type="text" class="form-control" id="texto-12" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(12)" disabled type="button" id="boton-12">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">11:15 a.m</span>
<input onclick="activareditarturnomtext(13)" type="text" class="form-control" id="texto-13" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(13)" disabled type="button" id="boton-13">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">11:30 a.m</span>
<input onclick="activareditarturnomtext(14)" type="text" class="form-control" id="texto-14" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(14)" disabled type="button" id="boton-14">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">11:45 a.m</span>
<input onclick="activareditarturnomtext(15)" type="text" class="form-control" id="texto-15" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(15)" disabled type="button" id="boton-15">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">12:00 a.m</span>
<input onclick="activareditarturnomtext(16)" type="text" class="form-control" id="texto-16" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(16)" disabled type="button" id="boton-16">Editar</button>
</div>
</div>
<div class="input-group mb-2">
<span class="input-group-text">13:00 a.m</span>
<input onclick="activareditarturnomtext(17)" type="text" class="form-control" id="texto-17" placeholder="">
<div class="input-group-append">
<button class="btn btn-success" onclick="alerta(17)" disabled type="button" id="boton-17">Editar</button>
</div>
</div>
this would be the HTML code that I have, I would need to implement the rest
Here you have an example, I created a structure to save the time blocks, because I don't know how you are getting that
The first thing is to get the start and end date. Then you do a for from "initial" to "final", adding the minutes that are declared in the structure in the "every" field and that's it.
Then you do the same for the afternoon session.
To put it inside a span, you could put an id in each span: id="hour1", id="hour2", etc.
And then you put: