We Keep Coding

data- attribute not working to grab dynamic id from foreach

I am using JS in a razor page to grab a dynamic ID from a col in a foreach.
In the past, I have used this and it worked fine. However, it seems that it is currently only grabbing the ID from the first col no matter which one I click.
Can someone please tell me if I am still doing this right? Or if I am missing something. Thank you.
View:
<div class="list-group container" id="JobRequestMonitorTable">
<div class="row list-group-item list-group-item-heading container divTableHeading" style="margin-bottom:0px;">
<div class="col-md-4"> Job Code </div>
<div class="col-md-4"> Description </div>
<div class="col-md-2"> Schedule </div>
<div class="col-md-1"> Running </div>
<div class="col-md-1"></div>
</div>
#if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
{
<div class="row list-group-item-danger">
<div class="col-md-1 text-center">#ViewBag.ErrorMessage</div>
</div>
}
#foreach (var item in Model.JobRequests)
{
<div class="row list-group-item container">
<div class="hidden" data-id="#item.JobRequestId" id="requestId">#item.JobRequestId</div>
<div class="col-md-4">#item.JobCode</div>
<div class="col-md-4">#item.Description</div>
<div class="col-md-2">#item.Schedule</div>
#if (#item.IsRunning == true)
{
<div class="col-md-1" style="margin-left:25px;"><span class="glyphicon glyphicon-ok"></span></div>
<div class="col-md-1"></div>
}
else
{
<div class="col-md-1"></div>
<div class="col-md-1">
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn"></button>
</div>
}
</div>
}
</div>
JS:
$("button").click(function () {
var col = $('#requestId');
var jobRequestId = col.data('Id');
$.ajax({
url: '#Url.Action("JobPollerParameters", "Tools")',
data: { "jobRequestId": jobRequestId},
success: function (results) {
$modal = $('#paramsModal');
$modal.modal("show");
var arr = results;
//loop through arr created from dictionary to grab key(s)
for (var key in arr) {
if (arr.hasOwnProperty(key)) {
var myKey = key;
}
}
var name = myKey;
var value = results[myKey];
$('#modalName').text(name);
$('#modalMessage').text(value);
}
});
});
Really the only important part to see in the JS is var col = $('#requestId');
var jobRequestId = col.data('Id');
But I suppose I will include the whole script just in case people ask.

Your loop is creating multiple #requestId and #paramModalBtn elements when id attributes have to be unique within the DOM. Change the logic to use common classes instead. Then you can traverse the DOM to find the elements related to the button which was clicked. Try this:
$("button").click(function() {
var $col = $(this).closest('.row').find('.requestId');
var jobRequestId = $col.data('id');
console.log(jobRequestId);
// AJAX request...
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="row list-group-item container">
<div class="hidden requestId" data-id="foo-bar">Job #1</div>
<!-- other content... -->
<div class="col-md-1">
<button class="glyphicon glyphicon-list-alt btn btn-primary" name="paramsBtn"></button>
</div>
</div>
<div class="row list-group-item container">
<div class="hidden requestId" data-id="lorem-ipsum">#Job #2</div>
<!-- other content... -->
<div class="col-md-1">
<button class="glyphicon glyphicon-list-alt btn btn-primary" name="paramsBtn"></button>
</div>
</div>

All of your items inside the loop are getting the same id attribute, it is hard-codded
id="requestId"
the jQuery selector $('#requestId') is getting back the first one, this is by design.
I would add a data-id to each button and select the relevant col with that id.
For example the button will get:
<button data-col-id="#item.JobRequestId" class="glyphicon glyphicon-list-alt btn btn-primary"></button>
And then, its easy to grab that info on click:
$("button").click(function () {
var jobRequestId = $(this).data('col-id');
$.ajax({
url: '#Url.Action("JobPollerParameters", "Tools")',
data: { "jobRequestId": jobRequestId},
success: function (results) {
$modal = $('#paramsModal');
$modal.modal("show");
var arr = results;
//loop through arr created from dictionary to grab key(s)
for (var key in arr) {
if (arr.hasOwnProperty(key)) {
var myKey = key;
}
}
var name = myKey;
var value = results[myKey];
$('#modalName').text(name);
$('#modalMessage').text(value);
}
});
});
I like this solution as you are not depended on your HTML structure and hierarchy thus selectors won't break often.

Once you have a button for each item, you could also store the data into the button value attribute, which leads to a simple implementation in the JS:
$("button").click(function (e) {
var jobRequestId = $(e.target).val();
console.log(jobRequestId);
$.ajax({
url: '#Url.Action("JobPollerParameters", "Tools")',
data: { "jobRequestId": jobRequestId},
success: function (results) {
$modal = $('#paramsModal');
$modal.modal("show");
var arr = results;
//loop through arr created from dictionary to grab key(s)
for (var key in arr) {
if (arr.hasOwnProperty(key)) {
var myKey = key;
}
}
var name = myKey;
var value = results[myKey];
$('#modalName').text(name);
$('#modalMessage').text(value);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="1">Job 1</button><br />
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="2">Job 2</button><br />
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="3">Job 3</button><br />
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="4">Job 4</button><br />
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="5">Job 5</button>
Obs.: value must be equal to #item.JobRequestId like so: <button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="#item.JobRequestId">Job 5</button>

How can delete the clicked item using the click event if all items have the same Id

I'm trying to delete only the selected list item but it is only working when manually add the item in the code and note using javascript, But I want to add and remove element to the list using code please help thanks.
I want to be able to add elements to the ul element and remove them when clicked on the x on the top right corner.
<div class="todocontent">
<ul id="todolist" class="todolist">
<li id="todoitem" class="todoitem">
<div class="todotextheader">
<div class="todotxthd"><h3>To do note Header</h3></div>
<div class="delete"><i id="deletex" class="far fa-window-close deletex" ></i>
</div>
</div>
<div class="todotext">
<p>this is the main text of the todo note</p>
</div>
</li>
</ul>
</div>
<div class="addcontainer">
<div class="addtextheader">
<input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50">
</div>
<div class="addtext">
<textarea name="addtxt" id="addtxt" cols="79" rows="7"></textarea>
</div>
<div class="addbtn">
<button id="add">+</button>
</div>
</div>
my js:
document.getElementById('add').addEventListener('click', function(){
//get the text and the text header from the fields
var addtxtheader = document.getElementById('addtxtheader').value;
var addtxt = document.getElementById('addtxt').value;
// get the list
var list = document.getElementById('todolist');
//create elements
var listitem = document.createElement('li')
var todotxtheader = document.createElement('div');
var todotxthd = document.createElement('div');
var deleteitem = document.createElement('div');
var deletex = document.createElement('i');
var todohtxt = document.createElement('h3');
var todotext = document.createElement('div');
var todotxt = document.createElement('p');
//add classes to their respected elements
listitem.classList.add('todoitem');
todotxtheader.classList.add('todotextheader');
todotxthd.classList.add('todotxthd');
deleteitem.classList.add('delete');
todotext.classList.add('todotext');
//append elements
list.insertBefore(listitem, list.childNodes[0])
listitem.appendChild(todotxtheader);
todotxtheader.appendChild(todotxthd);
todotxthd.appendChild(todohtxt);
todotxtheader.appendChild(deleteitem);
deleteitem.appendChild(deletex);
deletex.innerHTML = '<i id="deletex" class="far fa-window-close deletex" >'
listitem.appendChild(todotext);
todotext.appendChild(todotxt)
//assign the input value
todohtxt.innerHTML = addtxtheader;
todotxt.innerHTML = addtxt;
})
document.getElementById('deletex').addEventListener('click', function(){
var item = this.parentNode.parentNode.parentNode;
var parent = item.parentNode;
parent.removeChild(item);
})
my code: https://jsfiddle.net/c2rkm7tx/

Yo need to loop thru all elements and add an event listener. On new element run the addListener function to add event listener on new elements.. You can see my example
document.getElementById('add').addEventListener('click', function(){
document.getElementById('todolist').innerHTML += '<li id="todoitem" class="todoitem">'+
'<div class="todotextheader">'+
'<div class="todotxthd">'+
'<h3>'+
document.getElementById('addtxtheader').value+
'</h3>'+
document.getElementById('addtxt').value +
'</div>'+
'<div class="delete"><i id="deletex" class="far fa-window-close deletex" ></i></div>'+
'</div>'+
'<div class="todotext">'+
'<p>this is the main text of the todo note</p>'+
'</div></li>';
addListener()
})
function addListener(){
var elements = document.getElementsByClassName('delete');
for(var element in elements){
elements[element].addEventListener('click', function(e){
e.target.parentNode.parentNode.parentNode.remove();
})
}
}
addListener();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ToDo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/fontawesome.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<div class="addcontainer">
<div class="addtextheader">
<input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50">
</div>
<div class="addtext">
<textarea name="addtxt" id="addtxt" cols="79" rows="7"></textarea>
</div>
<div class="addbtn">
<button id="add">+</button>
</div>
</div>
<div class="todocontainer">
<div class="todoheader">
<h1>TO DO DONE</h1>
</div>
<div class="todocontent">
<ul id="todolist" class="todolist">
<li id="todoitem" class="todoitem">
<div class="todotextheader">
<div class="todotxthd"><h3>To do note Header</h3></div>
<div class="delete"><i id="deletex" class="far fa-window-close deletex" ></i></div>
</div>
<div class="todotext">
<p>this is the main text of the todo note</p>
</div>
</li>
</ul>
</div>
<div class="addcontainer">
<div class="addtextheader">
<input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50">
</div>
<div class="addtext">
<textarea name="addtxt" id="addtxt" cols="79" rows="7"></textarea>
</div>
<div class="addbtn">
<button id="add">+</button>
</div>
</div>
</div>
<script src="todo.js"></script>
</body>
</html>

Here is a simple solution of your problem! Sorry if I didn't understand what you meant..
document.getElementById('add').addEventListener('click', function(){
//get the text and the text header from the fields
var addtxtheader = document.getElementById('addtxtheader').value;
var addtxt = document.getElementById('addtxt').value;
// get the list
var list = document.getElementById('todolist');
//create elements
var listitem = document.createElement('li')
var todotxtheader = document.createElement('div');
var todotxthd = document.createElement('div');
var deleteitem = document.createElement('div');
var deletex = document.createElement('i');
var todohtxt = document.createElement('h3');
var todotext = document.createElement('div');
var todotxt = document.createElement('p');
//add classes to their respected elements
listitem.classList.add('todoitem');
todotxtheader.classList.add('todotextheader');
todotxthd.classList.add('todotxthd');
deleteitem.classList.add('delete');
todotext.classList.add('todotext');
//append elements
list.insertBefore(listitem, list.childNodes[0])
listitem.appendChild(todotxtheader);
todotxtheader.appendChild(todotxthd);
todotxthd.appendChild(todohtxt);
todotxtheader.appendChild(deleteitem);
deleteitem.appendChild(deletex);
deletex.innerHTML = '<i id="deletex" class="far fa-window-close deletex" >'
listitem.appendChild(todotext);
todotext.appendChild(todotxt)
//assign the input value
todohtxt.innerHTML = addtxtheader;
todotxt.innerHTML = addtxt;
})
document.addEventListener('click', function(e){
e=(e||window.event);
e.preventDefault();
const path=e.path;
path.forEach(elem=>{
if(elem!=window&&elem!=document&&elem!=document.documentElement) {
if(elem.id=="deletex"){
var item = elem.parentNode.parentNode.parentNode;
var parent = item.parentNode;
parent.removeChild(item);
}
}
});
})
<div class="todocontent">
<ul id="todolist" class="todolist">
<li id="todoitem" class="todoitem">
<div class="todotextheader">
<div class="todotxthd"><h3>To do note Header</h3></div>
<div class="delete"><i id="deletex" class="far fa-window-close deletex" >X</i>
</div>
</div>
<div class="todotext">
<p>this is the main text of the todo note</p>
</div>
</li>
</ul>
</div>
<div class="addcontainer">
<div class="addtextheader">
<input type="text" id="addtxtheader" style="width: 565px; height: 25px;" maxlength="50">
</div>
<div class="addtext">
<textarea name="addtxt" id="addtxt" cols="79" rows="7"></textarea>
</div>
<div class="addbtn">
<button id="add">+</button>
</div>
</div>

Your solution should already work a little more cleaner example:
document.getElementById('todoitem').addEventListener('click', function(event){
if(event.originalTarget.id == "deletex"){
this.parentElement.removeChild(this);
}
})
What this does is, it binds the event handler to the ToDo item it self. Sine DOM events bubble the list item will get triggered when some one clicks it and it checks if that click was onto the deletex item and if so it will delete itself.
Bind this event listener onto the object when creating it.
//create elements
var listitem = document.createElement('li')
listitem.addEventListener('click', function(event){
if(event.originalTarget.id == "deletex"){
this.parentElement.removeChild(this);
}
})
var todotxtheader = document.createElement('div');
var todotxthd = document.createElement('div');

Javascript Function back to it's original place

I'm not actually a programmer but I have to do this website work properly. And for that I'll need your help.
I'm messing with some javascript and I manage to maek this:
<script>
function funcaosabores1() {
document.getElementById("testeagora1").innerHTML = "";
document.getElementById('contento1').style.visibility="visible";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores2() {
document.getElementById("testeagora2").innerHTML = "";
document.getElementById('contento2').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores3() {
document.getElementById("testeagora3").innerHTML = "";
document.getElementById('contento3').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores4() {
document.getElementById("testeagora4").innerHTML = "";
document.getElementById('contento4').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores5() {
document.getElementById("testeagora5").innerHTML = "";
document.getElementById('contento5').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
}
</script>
And I can't find on how to make for example: funcaosabores1 is clicked and is now visible, when I click funcaosabores2, the first one is hidden and the second is showing. But I can't click on the first one back because it was already clicked. (Idk if it's called return)
This is the div's called in the script:
<div class="animacao_saborgingerale" id="contento2" style="visibility:hidden;"></div>
<div class="animacao_saboruvasyrah" id="contento3" style="visibility:hidden;"></div>
<div class="animacao_sabortangerina" id="contento4" style="visibility:hidden;"></div>
<div class="animacao_saboruvabranca" id="contento5" style="visibility:hidden;"></div>
<div class="sabor-melancia"><p onclick="funcaosabores1()" id="testeagora1">MELANCIA</p> </div>
<div class="sabor-gingerale"><p onclick="funcaosabores2()" id="testeagora2">GINGER ALE</p></div>
<div class="sabor-uvasyrah"><p onclick="funcaosabores3()" id="testeagora3">UVA SYRAH</p></div>
<div class="sabor-tangerina"><p onclick="funcaosabores4()" id="testeagora4">TANGERINA</p></div>
<div class="sabor-uvabranca"><p onclick="funcaosabores5()" id="testeagora5">UVA BRANCA</p></div>
This seems quite messy but I'm here if you guys can help me! Thanks.
The CodePen of how it is right now. #nielsdebruin

I think you just want to do something like this:
let prevButton;
let prevContent;
function toggle(e) {
if (prevButton) prevButton.style.visibility = 'visible';
prevButton = e.target;
e.target.style.visibility = 'hidden';
let id = e.target.id;
let number = id.slice(-1);
if (prevContent) prevContent.style.visibility = 'hidden';
prevContent = document.getElementById('contento' + number);
prevContent.style.visibility = 'visible';
}
<div class="content animacao_saborgingerale" id="contento1" style="visibility:hidden;">1</div>
<div class="content animacao_saborgingerale" id="contento2" style="visibility:hidden;">2</div>
<div class="content animacao_saboruvasyrah" id="contento3" style="visibility:hidden;">3</div>
<div class="content animacao_sabortangerina" id="contento4" style="visibility:hidden;">4</div>
<div class="content animacao_saboruvabranca" id="contento5" style="visibility:hidden;">5</div>
<div class="button sabor-melancia"><p onclick="toggle(event)" id="testeagora1">MELANCIA</p> </div>
<div class="button sabor-gingerale"><p onclick="toggle(event)" id="testeagora2">GINGER ALE</p></div>
<div class="button sabor-uvasyrah"><p onclick="toggle(event)" id="testeagora3">UVA SYRAH</p></div>
<div class="button sabor-tangerina"><p onclick="toggle(event)" id="testeagora4">TANGERINA</p></div>
<div class="button sabor-uvabranca"><p onclick="toggle(event)" id="testeagora5">UVA BRANCA</p></div>

Checkout radial progress bar event

I've created the radial checkout progress bar wit h some animation and transition. Added the event on the button. But the issues is I have the different content for each step in the checkout. What is the best practice. Is it better use the data attr. for this. The content should hide and shown for certain checkout. codepen
<div class="step-1" id="checkout-progress" data-current-step="1">
<div class="progress-bar">
<div class="step step-1 active " data-step="1"><span> 1</span>
<div class="step-check">t</div>
<div class="step-label"> address</div>
</div>
<div class="step step-2" data-step="2"><span> 2</span>
<div class="step-check">a</div>
<div class="step-label"> shipping</div>
</div>
<div class="step step-3" data-step="3"><span> 3</span>
<div class="step-check">b</div>
<div class="step-label"> payment</div>
</div>
<div class="step step-4" data-step="4"><span> 4</span>
<div class="step-check">3</div>
<div class="step-label"> summary</div>
</div>
</div>
</div>
<!-- <div class="button-container">
<div class="btn btn-prev"> previous step</div>
<div class="btn btn-next"> next step</div>
</div> -->
<div class="checkout-content" data-step="1">
<h1>checkout content 1</h1>
<div class="btn btn-next"> next step</div>
<div class="btn btn-next"> next step</div>
</div>
<div class="checkout-content" data-step="2">
<h1>checkout content 2</h1>
<div class="btn btn-next"> next step</div>
<div class="btn btn-next"> next step</div>
</div>
<div class="checkout-content" data-step="3">
<h1>checkout content 3</h1>
<div class="btn btn-next"> next step</div>
<div class="btn btn-next"> next step</div>
</div>
<div class="checkout-content" data-step="4">
<h1>checkout content 4</h1>
<div class="btn btn-next"> next step</div>
<div class="btn btn-next"> next step</div>
</div>
$('.btn-next').on('click', function() {
var currentStepNum = $('#checkout-progress').data('current-step');
var nextStepNum = (currentStepNum + 1);
var currentStep = $('.step.step-' + currentStepNum);
var nextStep = $('.step.step-' + nextStepNum);
var progressBar = $('#checkout-progress');
$('.btn-prev').removeClass('disabled');
if(currentStepNum == 5) {
return false;
}
if(nextStepNum == 5){
$(this).addClass('disabled');
}
// $('.checkout-progress').removeClass('.step-' + currentStepNum).addClass('.step-' + (currentStepNum + 1));
currentStep.removeClass('active').addClass('valid');
currentStep.find('span').addClass('opaque');
currentStep.find('.step-check').removeClass('opaque');
nextStep.addClass('active');
progressBar.removeAttr('class').addClass('step-' + nextStepNum).data('current-step', nextStepNum);
});
$('.btn-prev').on('click', function() {
var currentStepNum = $('#checkout-progress').data('current-step');
var prevStepNum = (currentStepNum - 1);
var currentStep = $('.step.step-' + currentStepNum);
var prevStep = $('.step.step-' + prevStepNum);
var progressBar = $('#checkout-progress');
$('.btn-next').removeClass('disabled');
if(currentStepNum == 1) {
return false;
}
if(prevStepNum == 1){
$(this).addClass('disabled');
}
// $('.checkout-progress').removeClass('.step-' + currentStepNum).addClass('.step-' + (prevStepNum));
currentStep.removeClass('active');
prevStep.find('span').removeClass('opaque');
prevStep.find('.step-check').addClass('opaque');
prevStep.addClass('active').removeClass('valid');
progressBar.removeAttr('class').addClass('step-' + prevStepNum).data('current-step', prevStepNum);
});

Why are you repeating Actions(next & pev) buttons in Contain section in every stage. Make it new section called .actions then you can place your actions buttons their...
Then you can have data-target attribute which holds the value of stepNumber to which it need to go when it clicked...
And you need to change data-target attribute every time when it clicks to which you want user to move next... And also same with pev button...

how to create generic html with javascript

I have the following html:
<div id="prog" class="downloads clearfix">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label id="pr1"></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a id="pdfdocument" class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
I want build HTML which is inside the <div id="prog"> with Javascript:
<div id="prog" class="downloads clearfix"></div>
I'm trying to use this Javascript, but without success:
var tmpDocument, tmpAnchorTagPdf, tmpAnchorTagXls, parentContainer, i;
parentContainer = document.getElementById('prog');
for (i = 0; i < documents.length; i++) {
tmpDocument = documents[i];
tmpAnchorTagPdf = document.createElement('a id="pdfdocument" ');
tmpAnchorTagPdf.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagPdf.innerHTML = 'start Download';
tmpAnchorTagXls = document.createElement('a');
tmpAnchorTagXls.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagXls.innerHTML = 'start Download';
parentContainer.appendChild(tmpAnchorTagPdf);
parentContainer.appendChild(tmpAnchorTagXls);
}

If this is a section of code that you will be using more than once, you could take the following approach.
Here is the original div without the code you want to create:
<div id="prog" class="downloads clearfix">
</div>
Create a template in a hidden div like:
<div id="itemtemplate" style="display: none;">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
Then duplicate it with jquery (OP originally had a jquery tag; see below for JS), update some HTML in the duplicated div, then add it to the document
function addItem() {
var item = $("#itemtemplate div.item").clone();
//then you can search inside the item
//let's set the id of the "a" back to what it was in your example
item.find("div.link a").attr("id", "pdfdocument");
//...the id of the label
item.find("div.title label").attr("id", "pr1");
//then add the objects to the #prog div
$("#prog").append(item);
}
update
Here is the same addItem() function for this example using pure Javascript:
function JSaddItem() {
//get the template
var template = document.getElementById("itemtemplate");
//get the starting item
var tempitem = template.firstChild;
while(tempitem != null && tempitem.nodeName != "DIV") {
tempitem = tempitem.nextSibling;
}
if (tempitem == null) return;
//clone the item
var item = tempitem.cloneNode(true);
//update the id of the link
var a = item.querySelector(".link > a");
a.id = "pdfdocument";
//update the id of the label
var l = item.querySelector(".title > label");
l.id = "pr1";
//get the prog div
var prog = document.getElementById("prog");
//append the new div
prog.appendChild(item);
}
I put together a JSFiddle with both approaches here.