We Keep Coding

Modal window for several products

I have a problem. I need to make a modal window for each product, but in the modal window, all products only display the last product. I tried to assign id identifiers, but then only the modal window of the first product works.
window.onload = function() {
$('.img-for-modal').click(function() {
$('.modal').css('display', 'block');
});
$('.close').click(function() {
$('.modal').css('display', 'none');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
<table class="product">
<tr>
<td class="img" rowspan="3">
<img class="img-for-modal" src="media/products-image/1.jpg">
<div class="modal">
<span class="close">×</span>
<img class="modal-img" src="media/products-image/1.jpg">
</div>
</td>
<td class="product-info">
<article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
</td>
</tr>
<tr>
<td class="product-info">
<b>Цена: </b>200 руб.
</td>
</tr>
<tr>
<td class="product-delete">
Добавить в корзину
</td>
</tr>
</table>

I suggest you change to this which will show the nearest modal and close the nearest modal. Your current code selects all items with class modal
Note I use jQuery $(function() { ... }); instead of window.onload = function() { ... }
$(function() {
$('.img-for-modal').click(function() {
$(this).next(".modal").show();
});
$('.close').click(function() {
$(this).closest(".modal").hide();
});
});
.modal { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="products-wrap">
<table class="product">
<tr>
<td class="img" rowspan="3">
<img class="img-for-modal" src="media/products-image/1.jpg">
<div class="modal">
<span class="close">×</span>
<img class="modal-img" src="media/products-image/1.jpg">
</div>
</td>
<td class="product-info">
<article>Lorem Ipsum is simply dummy text of the printing V1.0</article>
</td>
</tr>
<tr>
<td class="product-info">
<b>Цена: </b>200 руб.
</td>
</tr>
<tr>
<td class="product-delete">
Добавить в корзину
</td>
</tr>
</table>

Because you are selecting all the modals on the page and showing them all.
$('.modal').css('display', 'block');
You are not selecting the modal that corresponds with what you picked. In your case the modal is beside the image so grab the next element and display it.
$(this).next('.modal').css('display', 'block');
Other option people tend to do is data attributes and ids. You add a data attribute that has the id of the item you want to show. So you read the attribute, and than show that item.
<img class="img-for-modal" src="media/products-image/1.jpg" data-toggles="#modal1">
<div class="modal" id="modal1">
and than the JavaScript would look at the attribute
var selector = $(this).data("toggles")
$(selector).css('display', 'block');

If you are in need of your modals to display dynamic content, and you are not using a framework like Angular or React to update the components for you - then you will want to use a dedicated modal library. This will help you manage multiple modal instances, as well as all of your display bindings.
I have used Bootbox.js in the past for this purpose - if you are using Bootstrap, check it out. If you are not using Bootstrap, there are other plugins that will help you accomplish the same task.
The trouble with modals is that by design there can only be a single instance at any one time (think Singleton). So each time you call it, you are calling the same instance. So...if you try to populate multiple instances - it wont happen. Only or last data set will be applied.
The problem with using
http://bootboxjs.com/

Jquery Accordion function, alter class of parent

I have a bootstrap accordion table which is working fine. The glyphicon indicates which tablerows children-row is currently expanded. But something with the function seems to be wrong it doesn't change the class of the ancestor element as expected.
$('.accordion-text').on('shown.bs.collapse', function () {
$(this).closest(".indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('.accordion-text').on('hidden.bs.collapse', function () {
$(this).closest(".indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
Full code: http://jsfiddle.net/7pwg1j5f/616/
<tbody>
<tr id="package1" class="accordion-toggle" data-toggle="collapse" data-parent="#OrderPackages" data-target=".packageDetails1">
<td>123456</td>
<td>3</td>
<td><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</td>
</tr>
<tr>
<td colspan="3" class="hiddenRow">
<div class="accordion-text accordion-body collapse packageDetails1" id="">
<table>
<tr>
<td>Revealed item 1</td>
</tr>
<tr>
<td>Revealed item 2</td>
</tr>
</table>
</div>
</td>
</tr>

The way you were finding your .indicator element was not proper. It resides in the previous tr of .accordion elements parent tr. Just follow the structure and you will get the proper element. Also, you can combine both the events and use toggleClass instead of addClass and removeClass. So below is the updated solution.
$('.accordion1').on('shown.bs.collapse hidden.bs.collapse', function () {
$(this).closest('tr').prev(".accordion-toggle").find('.indicator').toggleClass("glyphicon-chevron-up glyphicon-chevron-down");
});
.closest('tr') - fetches the parent of .accordion1 div.
.prev('.accordion-toggle') - fetches the previous sibling of the
earlier obtained parent.
.find('.indicator') - find the .indicator element.
.toggleClass - toggles [add/removes] respective class.
Here is the Updated DEMO
Also note that I've made some changes in html to match the class

The problem is that your parents selector will never pickup cells from the previous row, you should select row, switch to previous and then find relevant element under that row:
$('.accordion1').on('show.bs.collapse', function () {
$(this).parentsUntil("tbody").prev().find(".indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('.accordion1').on('hide.bs.collapse', function () {
$(this).parentsUntil("tbody").prev().find(".indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

How to add div to span inside this table row?

I have a table row as such:
<tr class="song-row song-row-selected" data-id="1">
<td data-col="title">
<span class="song-content">
<img src="img/cover3.jpg" />
Song Title
</span>
</td>
<td>3:37</td>
<td>song artist</td>
<td>song album</td>
<td>23</td>
</tr>
I want to add a div to indicate that the song is paused (surrounded by *):
<tr class="song-row song-row-selected" data-id="1">
<td data-col="title">
<span class="song-content">
<img src="img/cover3.jpg" />
Song Title
*<div class="song-indicator loading"></div>*
</span>
</td>
<td>3:37</td>
<td>song artist</td>
<td>song album</td>
<td>23</td>
</tr>
I was hoping to use JQuery. So far I have:
function displayPause() {
$('tr.song-row.song-row-selected:first').each(function() {
$(this).siblings('td span.song-content').add('<div class="song-indicator paused"></div>');
});
}
Needless to say, it doesn't add the div. Also, I would like a function for me to easily remove the div from the span. Does anyone know where to point me in the right direction?

You should be using append as well as children, not siblings
$(this).children('td span.song-content').append('<div class="song-indicator paused"></div><input type="button" class="removeDiv" value="Remove"/>');
I also added a button right next to your div, clicking this will remove that div with this code:
$(document).on("click", ".removeDir", function() {
$(this).prev(".song-indicator").remove();
$(this).remove();
});

append is what you want:
$(this).find('td span.song-content')
.append('<div class="song-indicator paused"></div>');
This will ... append the div to the end of your span.
Also, as tymeJV says, your td is not a sibling of your tr; it's a child. Use either children, or find to grab it.
And to remove it, you'd use remove. If I understand your app correctly, it should be something like this:
$('tr.song-row.song-row-selected:first')
.find("div.song-indicator.paused").remove();

Here a litte sample on jsfiddle
$("tr.song-row-selected:first td span.song-content").append("*<div class='song-indicator loading'></div>*");

ICanHaz Not detecting template

I've checked the other posts on this topic, but none of them match my problem. Here is the code for my template:
<script id ="postingcell" type="text/html">
<li class="postinglistcell">
<div class = "postinfowrapper">
<table class="centermargins">
<tr>
<td>
<div class="posttitle">{{Title}}</div>
</td>
</tr>
</table>
</div>
</li>
</script>
And here is the code where I call the ICH:
$(document).ready(function() {
var p = ich["postingcell"](thisobj);
});
I can get an error telling me that ich["postingcell"] is not defined, but it has been in the above script tag. Does anyone know what im doing wrong here?

ICanHaz also uses jQuery for setting up. One possible reason is your code runs before the ich.grabTemplates() call.
if (ich.$) {
ich.$(function () {
ich.grabTemplates();
});
}
You may try calling ich.grabTemplates() in your code:
$(document).ready(function() {
ich.grabTemplates();
var p = ich["postingcell"](thisobj);
});

Need help to form Jquery to slide a table row down if mouse hovers over previous(one up) table row

Only scrolls up on pageload so far and even then the animation is jittery
and ugly. I suspect it's something to do with me wanting to use this on tr element.
<table>
<tr class="ItemHeading">
<td>ItemName</td>
</tr>
<tr class="ItemDescription">
<td>
<ul>
<li>Item spec</li>
</ul>
</td>
</tr>
</table>
<script type="text/javascript">
$(".ItemDescription").slideUp(300);
$(".ItemHeading").hover(function () {
$(this).next("tr").slideDown(300);
});
$(".ItemHeading").mouseleave(function () {
$(this).next("tr").slideUp(300);
});
// $(document).ready(function() { $(".ItemDescription").slideUp(300); } );
</script>
The below works fine, but it doesn't slide the table row up and down, just hides and shows. Provided
I set the .ItemDescription css display property to none.
$('.ItemHeading').hover(function () {
$(this).next("tr").css("display", "block");
$(this).mouseleave(function () { $(".ItemDescription").css("display", "none"); });
});

I would strongly suggest against tables with animations. It's just not going to give you the results you're looking for.
Also, you're using closest incorrectly. closest will go up the DOM to find the "closest" parent that matches the provided selector. You're looking for next which will select the following row.
html:
<div class="table">
<div class="tr ItemHeading">
<div class="td">ItemName</div>
</div>
<div class="tr ItemDescription">
<div class="td">
<ul>
<li>Item spec</li>
</ul>
</div>
</div>
</div>
jQuery:
$(".ItemDescription").slideUp(300);
$(".ItemHeading").hover(
function () {
$(this).next(".tr").slideDown(300);
},
function() {
$(this).next(".tr").slideUp(300);
}
);
Working example here: http://jsfiddle.net/VKBYy/1/