I have a card that gets data from the database and with a @foreach I'm looping it to create cards every time.
@foreach($cards as $c)
<div class="card_fold">
<button class="btn btn-danger top-left btn-fab btn-fab-mini btn-round ">
<i class="material-icons">clear</i>
</button>
<button id="create" class="btn btn-default top-right btn-fab btn-fab-mini btn-round " data-toggle="modal"
data-target="#imageModal">
<i class="material-icons">create</i>
</button>
<div class="card_fold__image-holder">
<img class="card_fold__image cover imgHolder" src="uploads/avatars/{{$c->img_src}}" alt="wave" />
</div>
<div class="card_fold-title">
<a href="#" class="toggle-info btn btn-primary">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
<input type="hidden" id="getId" value="{{$c->id}}" />
<div id="nameEnglish">{{$c->englishName}}</div>
<div id="nameAnime"> {{$c->animeName}}</div>
<small id="age">AGE {{$c->age}}</small>
</h2>
</div>
<div class="card_fold-flap flap1">
<div class="card_fold-description" id="content">
{{$c->content}}
</div>
<div class="card_fold-flap flap2">
<div class="card_fold-actions">
<a href="#" class="btn btn-primary">Read more</a>
<div id="Large-content" style="display: none;">
{{$c->largeContent}}
</div>
</div>
</div>
</div>
</div>
@endforeach
the idea is to have 1 modal connected to all the cards dynamically.
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit image</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="/editor" method="post" enctype="multipart/form-data">
@csrf
<div class="modal-body">
<div class="card " style="width: 28rem;">
<img id="output" src="uploads/avatars/{{ Auth::user()->avatar }}" class="card-img-top "
style="max-height: 28rem; object-fit: cover;" rel="nofollow">
<div class="card-body">
<label for="avatar" class=" btn btn-primary" style="min-width: 100%;">
Select a file
</label>
<input name="avatar" id="avatar" type="file" onchange="loadImg(event)" />
</div>
</div>
<div class="form-group">
<label for="modal-input-english-name">English Name</label>
<input type="text" class="form-control" id="modal-input-english-name" placeholder="...">
</div>
<div class="form-group">
<label for="modal-input-anime-name">Anime Name</label>
<input type="text" class="form-control" id="modal-input-anime-name" placeholder="...">
</div>
<div class="form-group">
<label for="modal-input-age">Charachter Age</label>
<input type="text" class="form-control" id="modal-input-age" placeholder="...">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Content</label>
<textarea class="form-control" id="modal-input-content" rows="2"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Read More Content</label>
<textarea class="form-control" id="modal-input-large-content" rows="3"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
Right now all the id's are the same and I'm trying to figure out a way to distinguish the cards from each other. This is the jquery I'm using right now which only works for the first cards since they all have the same id. in some way I need to dynamically add something so I can distinguish between what data to get.
$('#imageModal').on('shown.bs.modal', function() {
var img_src = $(".card_fold__image-holder").find("img").attr("src");
var nameEnglish = document.getElementById("nameEnglish");
var nameAnime = document.getElementById("nameAnime");
var age = document.getElementById("age");
var content = document.getElementById("content");
var largeContent = document.getElementById("Large-content");
$("#modal-input-english-name").val(nameEnglish.innerHTML );
$("#modal-input-anime-name").val(nameAnime.innerHTML );
$("#modal-input-age").val(age.innerHTML );
$("#modal-input-content").val(content.innerHTML );
$("#modal-input-large-content").val(largeContent.innerHTML );
$("#output").attr("src", img_src);
});
you have to add modal also in foreach loop like below to have different id for each modal
@foreach($cards as $k=>$c)
<div class="card_fold">
<button class="btn btn-danger top-left btn-fab btn-fab-mini btn-round ">
<i class="material-icons">clear</i>
</button>
<button id="create" class="btn btn-default top-right btn-fab btn-fab-mini btn-round " data-toggle="modal"
data-target="#imageModal{{$k+1}}">
<i class="material-icons">create</i>
</button>
<div class="card_fold__image-holder">
<img class="card_fold__image cover imgHolder" src="uploads/avatars/{{$c->img_src}}" alt="wave" />
</div>
<div class="card_fold-title">
<a href="#" class="toggle-info btn btn-primary">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
<input type="hidden" id="getId" value="{{$c->id}}" />
<div id="nameEnglish">{{$c->englishName}}</div>
<div id="nameAnime"> {{$c->animeName}}</div>
<small id="age">AGE {{$c->age}}</small>
</h2>
</div>
<div class="card_fold-flap flap1">
<div class="card_fold-description" id="content">
{{$c->content}}
</div>
<div class="card_fold-flap flap2">
<div class="card_fold-actions">
<a href="#" class="btn btn-primary">Read more</a>
<div id="Large-content" style="display: none;">
{{$c->largeContent}}
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="imageModal{{$k+1}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit image</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="/editor" method="post" enctype="multipart/form-data">
@csrf
<div class="modal-body">
<div class="card " style="width: 28rem;">
<img id="output" src="uploads/avatars/{{ Auth::user()->avatar }}" class="card-img-top "
style="max-height: 28rem; object-fit: cover;" rel="nofollow">
<div class="card-body">
<label for="avatar" class=" btn btn-primary" style="min-width: 100%;">
Select a file
</label>
<input name="avatar" id="avatar" type="file" onchange="loadImg(event)" />
</div>
</div>
<div class="form-group">
<label for="modal-input-english-name">English Name</label>
<input type="text" class="form-control" id="modal-input-english-name" placeholder="...">
</div>
<div class="form-group">
<label for="modal-input-anime-name">Anime Name</label>
<input type="text" class="form-control" id="modal-input-anime-name" placeholder="...">
</div>
<div class="form-group">
<label for="modal-input-age">Charachter Age</label>
<input type="text" class="form-control" id="modal-input-age" placeholder="...">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Content</label>
<textarea class="form-control" id="modal-input-content" rows="2"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Read More Content</label>
<textarea class="form-control" id="modal-input-large-content" rows="3"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
@endforeach
for jquery you can use something like below
$(document).on('show.bs.modal', '.modal', function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);});