Getting primary key/id of content on main page on a modal - php

Question

I am working on a music web app.On one page I have audios and I want to store it in a playlist. I click on add button so a modal with all the available playlists show up. On this modal I have the ids of playlist, I want to move the id of that audio here but something messy show up. Here is the code
<div id="owl-demo" class="owl-carousel owl-theme">
<?php
$audio=Audio::view_all();
foreach ($audio as $audios) {
$artist=Artist::find_by_id($audios->id);
?>
<div id="playlist" class="audio-cover">
<img src="admin/uploads/images/<?php echo $audios->audio_img_name; ?>">
<h5><?php echo $audios->audio_title; ?></h5><h5><?php echo "artist"; ?></h5>
<h6><?php echo $audios->audio_plays_count; ?> views </h6>
<div class="clear-fix"></div>
<h6><?php echo $audios->audio_likes_count; ?>likes</h6>
<a style="display:none;"track="<?php echo $audios->audio_link_name; ?>"></a>
<i class="fa fa-plus-square add"></i>
<i class="fa fa fa-heart like"></i>
<!--<div class="audio-cover-overlay"><li track="<?php echo $audios->audio_link_name; ?>" cover="<?php echo $audios->audio_img_name; ?>.jpg" artist="<?php echo $audios->audio_title ."-". $artist->name; ?>"><i id="play" class="fa fa-play-circle fa-2x play"></i></li></div>
!-->
</div>
<?php } ?>
</div>
<div class="modal" id="modal_playlists">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add To Playlist</h3>
</div>
<div class="modal-body">
<?php
$playlist=Playlist::view_all();
foreach ($playlist as $playlists) {
?>
<img src="./admin/uploads/playlist_images/<?php echo $playlists->img_link;?>" height="100px" width="100px">
<?php echo $playlists->title;?><br>
<?php }?>
</div>
</div>
</div>
</div>
Modal shows up for a second but then, this messy thing
Messy Thing after one second appearance of modal
ANy kind of help will be appreciated. Thank you

Answer 1

You can Carry audio id to model by bellow steps
First you have prevent open model automatically.
Create function which call on click of audio div or any element
on that function set audio id in var.
now trigger model, progamicaly. and stores audio id at any where in model by using element.html() or element.val()