Develop Reference

how do I select elements of same div as the button clicked

<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
This is my HTML Code. I have a Javascript code that executes when someone click on the link with class "download-button"
The code looks something like this
$(".download-button").click(function(event){
document.querySelector('.download-progress-container').style.display = 'none';
});
When I click on the download-button link of the second td element, the first td element download-progress-container hides.

Get the common parent element and then find the element within it to hide.
$(".download-button").click(function(event){
// prevent default click event action
event.preventDefault();
// get the td ancestor and get element within that td
$(this).closest('.name').find('.download-progress-container').hide();
});
$(".download-button").click(function(event) {
// prevent default click event action
event.preventDefault();
// get the td ancestor and get element within that td
$(this).closest('.name').find('.download-progress-container').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
</tr>
</table>

Use $(this) to hide clicked element
$(".download-button").click(function(event){
var _t = $(this);
_t.parents('td').find('.download-progress-container').hide();
//document.querySelector('.download-button').style.display = 'none';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>

A simple approach would be to hide all .download-progress-container descendants of the .parent() of the download button being clicked. You can achieve that with the following:
$(".download-button").click(function(event) {
/* Prevent default click action behavior */
event.preventDefault();
/* Hide the progress container that is a descendant of the same
anscestor of the download button being clicked */
$('.download-progress-container', $(this).parent()).hide();
});
Here's a working snippet (yellow blocks show progress element):
$(".download-button").click(function(event) {
/* Prevent default click action behavior */
event.preventDefault();
/* Hide the progress container that is a descendant of the same
anscestor of the download button being clicked */
$('.download-progress-container', $(this).parent()).hide();
});
.download-progress {
background:yellow;
height:1rem;
width:2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
<tr>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
<td class="name">
<div class="download-ui-container">
<div class="start-download">Starting Download..</div>
<div class="download-progress-container">
<div class="download-progress"></div>
</div>
<a class="save-file">Save File</a>
</div>
abc.mp4
</td>
</tr>
</table>

Change your javascript code with following.
Replace
$(".download-button").click(function(event){
document.querySelector('.download-button').style.display = 'none';
});
With
$(".download-button").click(function(event){
$(this).hide();
});

Clickable link inside UI Sortable field

I am making a custom field for the Advanced Custom Fields plugin for wordpress.
Now I have been able to allow javascript to be used inside of the field but the field has UI-sortable active which makes my anchor tag not firering but instead clicks the sortable anchor.
Is there a way to make sure that my click event gets fired inside a sortable element?
So I created this link, to be placed inside a element :
<a id="addTable" href="#">Voeg tabel toe</a>
Which gets turned into an element like this :
<div id="normal-sortables" class="meta-box-sortables ui-sortable">
<div id="acf-group_5a93d53605864" class="postbox acf-postbox seamless">
<button type="button" class="handlediv" aria-expanded="true">
<span class="screen-reader-text">paneel Bridge verbergen</span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
<h2 class="hndle ui-sortable-handle">
<span>Bridge</span>
<a href="{link}/wp-admin/post.php?post=12695&action=edit"
class="dashicons dashicons-admin-generic acf-hndle-cog acf-js-tooltip"
title="Bewerk groep">
</a>
</h2>
<div class="inside acf-fields -top">
<div class="acf-field acf-field-Bridge acf-field-5a93d538671c7"
data-name="bridge"
data-type="Bridge" data-key="field_5a93d538671c7">
<div class="acf-label">
<label for="acf-field_5a93d538671c7">Bridge</label>
</div>
<div class="acf-input">
<!-- Here is the anchor tag -->
<a id="addTable" href="#">Voeg tabel toe</a>
<div id="ContentWrapper">
<div id="North"></div>
<div id="East"></div>
<div id="Middle">
<table bgcolor="#c0c0c0">
<tbody>
<tr>
<td colspan="3" align="center"><strong>N</strong></td>
</tr>
<tr>
<td align="left"><strong>W</strong></td>
<td> </td>
<td align="right"><strong>O</strong></td>
</tr>
<tr>
<td colspan="3" align="center"><strong>Z</strong></td>
</tr>
</tbody>
</table>
</div>
<div id="South"></div>
<div id="West"></div>
</div>
</div>
</div>
<script type="text/javascript">
if ( typeof acf !== 'undefined' ) {
acf.postbox.render({
"id": "acf-group_5a93d53605864",
"key": "group_5a93d53605864",
"style": "seamless",
"label": "top",
"edit_url": "http:\/\/{link}\/wp-admin\/post.php?post=12695&action=edit",
"edit_title": "Bewerk groep",
"visibility": true
});
}
</script>
</div>
</div>
</div>
(function($) {
$("#addTable").click(function () {
alert( "Click" );
});
})(jQuery);

Set and align to the left an anchor tag after a JavaScript code

I try to indent correctly different anchors after especially an anchor located just after a <script type="text/javascript" ...></script>.
You can see the current page that I get on this link.
and the following figure :
As you can notice, the second anchor (2.Pistes d'optimisation) is not left aligned like the first one (1.Canvas game) and moreover, it is too vertically closed relatively to the canvas.
I think this is due to the fact that I include the JavaScript tag just after the last external <div> containing the canvas.
For example, I have :
<div>
... <canvas>
</div>
<script type="text/javascript" src="game_css_and_js/game.js"></script>
<h4><a name="optimization">2.Pistes d'optimisation :</a></h4>
How can I have right margins for this second anchor (2.Pistes d'optimisation) to get a left aligning and a correct vertical space compared to the canvas (like the first anchor) ?

You issue is that You have the <h4><a name="optimization">2.Pistes d'optimisation :</a></h4> inside <div id="main-wrapper"> and the <h4><a name="canvas">1.Canvas game :</a></h4> is outside the <div id="main-wrapper">. Just put the second link outside to resolve your issue as follows:
<td class="body_content">
<br>
<ul>
<li><a class="bottom_link" href="index.html#canvas">1.Jeu game</a></li>
<li><a class="bottom_link" href="index.html#optimization">2.Pistes d'optimisation</a></li>
</ul>
<h4><a name="canvas">1.Canvas game :</a></h4>
<div id="main-wrapper">
<div id="game-wrapper">
<canvas id="game-canvas" width="501" height="501"></canvas>
</div>
<div id="score-zone-wrapper">
<table id="score-zone">
<tbody><tr>
<td id="score-zone-white" colspan="2" style="padding: 5px;">White Score</td>
</tr>
<tr>
<td id="score-white"></td>
<td align="center" style="float: right; padding-top: 5px; padding-right: 30px;">
<svg height="54" width="54">
<circle cx="27" cy="27" r="26" stroke="black" stroke-width="1" fill="white"></circle>
</svg>
</td>
</tr>
<tr>
<td id="score-zone-black" colspan="2" style="padding: 5px;">Black Score</td>
</tr>
<tr>
<td id="score-black"></td>
<td align="center" style="float: right; margin-top: 5px; padding-right: 30px;">
<svg height="54" width="54">
<circle cx="27" cy="27" r="26" stroke="white" stroke-width="1" fill="black"></circle>
</svg>
</td>
</tr>
</tbody></table>
</div>
<div id="messaging"></div>
<div id="paramStart">
<div id="gameType">
<form id="formGame">
<div id="PlayerVsComputer" class="checkbox">
<label>
<input type="checkbox" class="game">
<div class="btn-group" role="group">
<button type="button" class="btn btn-inverse btn-xs">Player</button>
<button type="button" class="btn btn-classic btn-xs">Computer</button>
</div>
</label>
</div>
<div id="Player1VsPlayer2" class="checkbox">
<label>
<input type="checkbox" class="game">
<div class="btn-group" role="group">
<button type="button" class="btn btn-inverse btn-xs">Player 1</button>
<button type="button" class="btn btn-classic btn-xs">Player 2</button>
</div>
</label>
</div>
</form>
<div id="PlayableHits" class="checkbox">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-xs">Show playable hits</button>
</div>
</div>
<div id="ButtonNewGame">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-xs">Start Game</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="game_css_and_js/game.js"></script>
</div>
<h4><a name="optimization">2.Pistes d'optimisation :</a></h4></td>

How to map data coming dynamically into the designed table individually in respective form fields using jquery?

My data in the table is coming from back-end or user can manually enter the values in the table. Now my question is 'how to map those values again into the form, from which user was able to enter values into the table using jquery'? This back mapping of data from table to form is done on click of edit link which is present in front of every entry of my data in the table.
<html>
<head>
<style>
.dropdown>a:after {
display: none;
}
.glyph-ok-size, .glyph-remove-size {
font-size: 15px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".add_edit_panel").hide();
$("#addNew").click(function() {
$(".add_edit_panel").slideToggle();
});
});
function edit(paramID){
$(".add_edit_panel").slideDown();
}
</script>
</head>
<body>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_CREATE"
var="canCreateOrgDates"></cu:secured>
<cu:secured hasPermission="CORE_CUSTOMER_DATES_UPDATE"
var="canUpdateOrgDates"></cu:secured>
<cu:taskView taskFlowData="${taskFlowData}"
taskFlowDefinition="${taskFlowDefinition}" id="dateRange"
renderTasks="false"
title="task.title.organization.daterange"
tasks="${taskFlowData.availableTasks}">
</cu:taskView>
<div class="row">
<form action="save.action" method="post">
<div class="col-sm-6">
<div class="panel add_edit_panel">
<div class="panel-heading">${fmt:message('dateRange.panel.add.edit') }</div>
<core:text name="orgDateObj.periodName"
label="${fmt:message('org.daterange.name') }"
required="false"
maxlength="20"
placeholder="${fmt:message('org.daterange.name') }">
</core:text>
<div class="row">
<div class="col-sm-6">
<core:date id="startDate" name="orgDateObj.startDate" label="${fmt:message('org.daterange.startdate')}"
placeholder="${fmt:message('org.daterange.startdate')}"
primary="false" required="true" />
</div>
<div class="col-sm-6">
<core:date id="endDate" name="orgDateObj.endDate" label="${fmt:message('org.daterange.enddate')}"
placeholder="${fmt:message('org.daterange.enddate')}"
primary="false" required="true" />
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label class="default" style="float=left"><core:checkbox
name="orgDateObj.isDefault" id="isDefault"
label="${fmt:message('org.daterange.defaultdate')}"
checked="true" indicator="true"
disabled="false"
title="${fmt:message('org.daterange.describe.defaultdate')}" />
</label>
<div class="btn-panel-margin">
<button id="save" type="submit" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.save')}
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel">
<div class="panel-heading">${fmt:message('dateRange.panel.listing') }</div>
<div class="row">
<div class="col-sm-12" style="overflow-x: scroll">
<table data-grid-sortable class="table table-striped table-condensed table-responsive sort-display-table">
<thead>
<tr>
<th data-column-sortable class="column-md sorted"><fmt:message key="table.date.name"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.startdate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-md"><fmt:message key="table.enddate"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"><fmt:message key="table.default"/>
<span class="caret column-sort-direction"/>
</th>
<th data-column-sortable class="column-sm"></th>
</tr>
</thead>
<tbody id="tbody">
<c:forEach var="orgDate" items="${orgDates}">
<tr>
<td class="column-md">${orgDate.periodName}</td>
<td class="column-md">${orgDate.startDate}</td>
<td class="column-md">${orgDate.endDate}</td>
<td class="column-sm">
<c:choose>
<c:when test="${orgDate.isDefault == '1'}">
<span class="glyphicon glyphicon-remove glyph-remove-size"></span>
</c:when>
<c:otherwise>
<span class="glyphicon glyphicon-ok glyph-ok-size"></span>
</c:otherwise>
</c:choose>
</td>
<td class="column-sm">
<div class="row">
<div class="col-sm-12">
<div class="dropdown">
Action<b class="caret"></b>
<ul class="pull-right dropdown-menu">
<li>
<a href="#" id="editButtonId" onclick="edit(${orgDate.orgDateId})" >
<i class="glyphicon glyphicon-pencil margin-right-5"></i>Edit
</a>
</li>
<li>
<a href="#" id="deleteButtonId${orgDate.orgDateId}"><i class="glyphicon glyphicon-trash margin-right-5"></i>Delete
</a>
</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="btn-panel-margin">
<button id="addNew" type="button" class="btn btn-ar btn-primary" data-allow-dirty="allow">
${fmt:message('button.addnew')}
</button>
</div>
</div>
</div>
</body>
</html>
enter image description here

in edit button give the row index as class and get the value of that row by mapping array index value of 1st row of table equals to array[0] access the array[0] values and place the value of array in form text box i.e
$('#textbox1').val=array[0]['name'];

you can do stuff like this
$('#edit').onclick(function (){
$('#name').val=array[0]['name'];
$('#startDate').val=array[1]['S-Date'];
$('#endDate').val=array[2]['E-Date'];
$('#checkbox').val=array[3]['Checkval'];
});

I wanted to know how your data is formed from Database
In jquery use
x=0;
objectdata.forEach(function(value,indexname,arr), thisValue) {
tabledata['col'+x][indexname]=value;
x++;
}

Hiding all but first element of a DataList via Javascript

I have a DataList which displays three products per row. What I want is to display the 'Category' name at the top of each row. Each item contains the Category so I want to display it only on the first one and maybe on a different div if possible.
At the moment I am not able to get the Label5 so I can do some actions on it. Any ideas?
<div id="dvProducts">
<asp:DataList ID="rptCustomers" runat="server" BorderColor="Black" CellPadding="0" RepeatDirection="Horizontal">
<ItemTemplate>
<asp:Label ID="Label5" runat="server" visible="true" Text='<%# Eval("SubCategoryID")%>'/></label>
<script type="text/javascript">
var theLabel = document.getElementById('Label5').eq(0);
//If theLabel is alread visible/rendered then other occurences.
//hide here
</script>
</ItemTemplate>
</asp:DataList>
</div>
Rendered HTML:
<div id="dvProducts">
<table id="dnn_ctr434_View_rptCustomers" cellspacing="0" cellpadding="0" style="border-color:Black;border-collapse:collapse;">
<tbody><tr>
<td>
<span id="dnn_ctr434_View_rptCustomers_Label5_0">1</span>
<div class="wrapping">
<div id="boxer">
<span class="Thumbnail">
<div class="photo_box img_zoom">
<a href="http://localhost/top3/TheDetails/ProductID/17">
<div class="pic_box">
<img src="/top3/Portals/0/thumbdesktop-wallpaper-high-resolution.png" alt="Mountain View" class="topimage">
<div class="ico"><span class="glyphicons glyph-search"></span></div>
</div>
</a>
</div>
</span>
<br>
<span class="ProductID">
<span id="dnn_ctr434_View_rptCustomers_ProductID_0">17</span></span>
<br>
<span class="Name">
<span id="dnn_ctr434_View_rptCustomers_Name_0">the big product</span></span>
</div>
</div>
<br>
</td><td>
<span id="dnn_ctr434_View_rptCustomers_Label5_1">1</span>
<div class="wrapping">
<div id="boxer">
<span class="Thumbnail">
<div class="photo_box img_zoom">
<a href="http://localhost/top3/TheDetails/ProductID/14">
<div class="pic_box">
<img src="/top3/Portals/0/images/images1/thumb10404234_10154364241210080_1593901414874601578_n.png" alt="Mountain View" class="topimage">
<div class="ico"><span class="glyphicons glyph-search"></span></div>
</div>
</a>
</div>
</span>
<br>
<span class="ProductID">
<span id="dnn_ctr434_View_rptCustomers_ProductID_1">14</span></span>
<br>
<span class="Name">
<span id="dnn_ctr434_View_rptCustomers_Name_1">Test</span></span>
</div>
</div>
<br>
</td><td>
<span id="dnn_ctr434_View_rptCustomers_Label5_2">1</span>
<div class="wrapping">
<div id="boxer">
<span class="Thumbnail">
<div class="photo_box img_zoom">
<a href="http://localhost/top3/TheDetails/ProductID/24">
<div class="pic_box">
<img src="/top3/Portals/0/Templates/thumb10502496_10154364240805080_26951325019847038_n.png" alt="Mountain View" class="topimage">
<div class="ico"><span class="glyphicons glyph-search"></span></div>
</div>
</a>
</div>
</span>
<br>
<span class="ProductID">
<span id="dnn_ctr434_View_rptCustomers_ProductID_2">24</span></span>
<br>
<span class="Name">
<span id="dnn_ctr434_View_rptCustomers_Name_2">fasdf</span></span>
</div>
</div>
<br>
</td>
</tr>
</tbody></table>
</div>

First, the id attribute must be unique. If you need more than one, then you should use class instead. In this particular case, you don't need either.
Add this in a script tag:
jQuery(function() {
jQuery('[id*=Label5]').hide().each(function(i){
if ( !(i % 4)) { $(this).show(); }
});
});
You can see it on this fiddle.