We Keep Coding

Jquery dynamically selector

I want to select the child element of an ID that is evaluated dynamically in jquery, but the code is not working. Where do you think is the mistake?
data_id is dynamically.
$("#duplicater" + data_id + ".chat_box_right_button_collapse").toggleClass("show");

In your code there is no space between your dynamic id and class name(before dot). Please check this and compare with your one
$("#duplicater" + data_id + " .chat_box_right_button_collapse").toggleClass("show");

You can use template literals
$(`#duplicater${data_id} .chat_box_right_button_collapse`).toggleClass("show");

If your child element is the element with a class of chat_box_right_button_collapse, then try with a space for the CSS selector :
$("#duplicater" + data_id + " .chat_box_right_button_collapse").toggleClass("show");
If your child element is a direct child, you can also use the > selector :
$("#duplicater" + data_id + " > .chat_box_right_button_collapse").toggleClass("show");

Highlighting row and column in a table

I want to highlight row and column in a table but not all of them, just until end of selected one td. I'll put a link here to prove what i want, go down and where is size table (size chart) hover on it and you will see:
http://www.nike.com/ro/en_gb/c/size-fit-guide/mens-shoe-sizing-chart
How can I highlight with limit like that?
Here is my table: https://jsfiddle.net/pkkbf9k2/

I think that's it:
https://jsfiddle.net/8odoros/pkkbf9k2/4/
$( "td" ).hover(
function() {
var myCol = $(this).index();
var $tr = $(this).closest('tr');
var myRow = $tr.index()+1;
$('tr:nth-child('+myRow+') td:lt('+myCol+')').addClass( "hover" );
myCol++; myRow--;
$('table tbody td:nth-child('+myCol+')').each(function (index) {
if(index<myRow) $(this).addClass( "hover" );
});
$(this).addClass('hoverBold');
}, function() {
$( '*' ).removeClass( "hover" );
$(this).removeClass('hoverBold');
}
);

Here is a similar CSS tutorial. It will give you a more better idea.
https://css-tricks.com/simple-css-row-column-highlighting/
Hope this helps you.

Here sample link for highlighting row using jquery
http://www.mkyong.com/jquery/how-to-highlight-table-row-record-on-hover-with-jquery/

You can give the bgcolor to the tag which you wanted to highlight.
<td bgcolor="#FF0000">Content</td>
Or You can give class also to the tag which you want to highlight.
example
<td class="highlight">Content</td>
and give the background color to the style.css file.

Appending ID without replacing original

I'm trying to append an ID to div elements, but it seems if there is already an ID it replaces the existing. I'm at a loss.
$(document).ready(function(){
$("div").each( function(i){
$(this).attr({ id: " num_" + ++i });
})
});

You can do it like below:
$(document).ready(function(){
$("div").each( function(i){
$(this).attr({ id: $(this).attr("id") + " num_" + ++i });
})
});

A div element can only have one identifier and this identifier must be unique.
So you can't append an id.

An element in html have atmost single id. To solve this problem use customised attributes. Start using 'data-id' and use them as the normal html attributes. If you want to add more ids you just increment number. like...
input id='name' data-id='username'

Jquery class for list elements

I'm trying to adapt a JS plugin and I need to give numerical classes to a series of li items
This is the code at the moment and I would like to add a class or a data attribute in order to be able to select them individually
var li = '<li><span></span>';

Try with JQuery addClass() to add class on based on its position.
For example
$( "ul li" ).addClass(function( index ) {
return "item-" + index;
});
This example adds the class "item-0" to the first <li> and "item-1" to the second.
In the same way you can add class on <a> under each <li>.
$( "ul li" ).each(function( index1 ) {
$(this).find('a').addClass(function( index2 ) {
return "item-" + (index1 * 10 + index2) ;
});
});

Add color to cell background

I am fetching data using PHP from MySQL Database. I have a field called outstanding dues, i want that if the outstanding dues are above 0, then the table should display this value with its cell border color as RED. Now, i trying to use a condition but it can't seem to work. I also tried doing this using JQuery Filter method, but still no luck, below is my code for JQuery
echo '<div class="middle"><td><center>'. $row['outstandingdues'] . '</center></td></div>';
The JQuery method i used for this is as under;
<script>
$( "div" )
.filter( ".middle" )
.css( "border-color", "red" );
</script>

div can't be a parent of td, td should be added to a tr so give the class to the td. tr is the only permitted parent of td
echo '<td class="middle"><center>'. $row['outstandingdues'] . '</center></td>';
then in style
td.middle {
border-color: red
}
or in script
$("td.middle").css("border-color", "red");

addition to Arun P Johny's answer:
<?php
$class_middle = "";
if($row['outstandingdues'] > 0) {
$class_middle = 'class="middle"';
} else {
$class_middle = "";
}
echo '<td '.$class_middle.'><center>'. $row['outstandingdues'] . '</center></td>';
?>
This will make it red only when outstanding dues are greater than 0.

Use this code (by the way do not use div inside your tr tag use it in td or assign .middle class to the td and remove div tag before that td
$(function() {
$( "div.middle" ).css( "background-color", "red");
});