We Keep Coding

Customize a select dropdown list

I am trying to customize a select element.
The problems I am facing so far is the arrows are not changing as expected and when I click outside the label element nothing is happening.
The first arrow should be there as default, if no hover or click occurs.
Clicking outside should hide the options div and put the first div in a default state.
var arrows = 'iVBORw0KGgoAAAANSUhEUgAAABQAAABLCAYAAABwUacvAAAEw0lEQVRYhe2XLXcbRxSGn+rsmUFjokUTokVr4kUSySIZGSUo/yFl/TdlQWZGDqlRg4ws5JCIdEO6aAWaQXdIC2ZX+2lZcQR6Tvvq6BztfLxzP2bve/XTX3/89jcnRARwZpcnIftWbpidhKmD/wl/HNFw4P7mV4ri6/M7XUWSLcnf/XyY0KYZd9cfePPLJbhqxOMrDcpwd/NIko2v24gwyXLWb9+CK8jWEgbLEgApPRjYupQ0v+Ti6t2IcDKGy3fv2X6Jx2SAlwXbLzH51RvOTHwc4ZkJG8pNNpp7LM/JVq9Jsnxq69NZTrKcsjIIyX7MywJt5iyW02QHCSEk6ON1+3z3+AoT20lXjyJMshybJDxuE7wsAA5a9ywhwHK95v52y/XNV7LV64PWHUV4luRk+RWxTcnWb59bPr6Hk1a+e8+u2B6z9DjCMxNzlh12tcG/v9r8BwkjCPJ3MsJyc38yMoAIpThfr36Y6NuuonzcEGlj9oPi5eWMIjgnRErrluwlfGE7PhR0IlD9Bc3MFJQajw2MiLTqWHeI7KnDBofMqF1uDwyflyJSqiUUhM3dhrIojtpsk4T8KlRwERcI9zGs3bF2zqfb25HQ+6rvyd3tAzZJGCKivw6bWtI8kGVraXXZeCjC4Z85J80vyfKLUXhmTd4FAQmT66sLtg8gZT1XtmSOhKIQltliMunj4uA9RmuW+ZJdmY6mtyQs8wyb2jHbnnAiqTYxFIWnqrKedQAmNiHm3gevRPY5mPXYvK/Zw5i1cz7dObwN1nwqIDZgOq/rEBFCSLS0RA1iq8HEbCtY1LGeJ/P+us5d9+KJwsi33mAXy8xyd3PDA7Ba5wetA5j5fYVxkwvi2BDbkJz0PMWL733bEEnjcmu+F99zoUF+mVL+GY/qyBQi8R6DCkS+sbS/0xhDeq7BCwzeBN9YUIcq8hKy4sUBHukkRw8KR3tq50DfXxOJc4gLgRbpZ3n43JnZ/9L7AhvGZgDaNJNDiw5jan2E91TlDpzHuelMPwXnPFoH90U8eBdiWG6rOsPfRziFCDwaHczXhy/tUYTqBCQ9QpRiV31F6SNu7QEYo4F5EHrlFDZJ0Gb+IjKlAK3ZFVUr9NrMMfPj2t4e6pujlcaV7kRCv7+OKgg9BBk0/uywNc8IvVanFnqtx0I/9Xtyb69LUgiCUnoihvD93cObdf2kxkKPyL57OIR5rNlVQpJ2boaGqNfg1eWq6R62979j6/dbbP9KxTYltpCuXoe9WgE6NO09Yaozub66AFdRleE/3irtx7RwsMyXKDMosE+51HQPZZmgq+D+RWwg8WyKK5aZwSZx8MoIEDw4IPSCsXXhiFdcrDQkHmoFNHG3N2+sFGYt31jojQ7dQ1FI+EdvUz5eN92DCuuby15vj4a6ORT6ffdQOhZGAa7uHjoQAWUA3xF6efodXmaWh/tHbj5sSNIYrfRA6JuICbNJoR9841h1uofFE8dWIBKEvmHX3jAl9NDpHtD9BgmPUg4wiPe10HsHzAH3pNAbo1kk8/GBvj3AiwShhyCDw3I3JfQyaPvCmbWUOte2xFqr0wk9yqCUBqXQx7RYXSjaCDQxVFqBMSjzEuUzaAPavMLLthX63bZk9wK6Fp8B+AebhiZ5WSZDHwAAAABJRU5ErkJggg==';
$('#testSelectDiv').css({
'font': $('#test').css('font'),
'width': $('#test').width() - 4,
'height': $('#test').height(),
'background': '#ffffeb url(data:image/png;base64,' + arrows + ') no-repeat right 0px'
})
.on('blur', function() {
$(this).css('background-position-y', '0px');
})
.on('click', function() {
$(this).css('background-position-y', $('#testSelectOptions').attr('display') == 'none' ? '-25px' : '-52px');
$('#testSelectOptions').toggle();
}).hover(function() {
$(this).css('background-position-y', '-25px');
}, function() {
$(this).css('background-position-y', $(this).css('background-position-y') == '-52px' ? '-52px' : '0px');
})
.find('div:first').html($('#test option:selected').text());
$('#testSelectOptions').css({
'font': $('#test').css('font'),
'width': $('#test').width() + 4,
'height': 24 * $('#test option').length + 2,
'background-color': '#ffffeb'
});
var ul = '<ul style="width:' + ($('#test').width() + 4) + 'px">';
$('#test option').each(function(k, v) {
ul += '<li selectvalue="' + $(v).val() + '"' + ([0, $('#test option').length - 1].indexOf(k) != -1 ? ' class="' + (k == 0 ? 'first' : 'last') + '-child"' : '') + ($(v).val() == $('#test option:selected').val() ? ' style="font-weight:bold"' : '') + '><a>' + $(v).text() + '</a></li>';
});
ul += '</ul>';
$('#testSelectOptions').html(ul).find('li').on('click', function() {
$(this).css({
'font-weight': 'bold'
}).siblings().css({
'font-weight': 'normal'
});
$('#testSelectDiv div').html($(this).text());
$('#test').val($(this).attr('selectvalue'));
$('#testSelectOptions').hide();
$('#testSelectDiv').css('background-position-y', '-0px');
});
select {
border: 1px solid #f1deb7;
padding: 2px;
background: #ffffeb;
font: normal 14px Arial, Helvetica, sans-serif;
}
#testSelectDiv {
display: inline-block;
border: 1px solid #f1deb7;
background: #ffffeb;
padding: 2px;
padding-left: 6px;
margin: 0px;
position: relative;
top: 7px;
}
#testSelectDiv:hover {
border: 1px solid #d19c6f;
}
#testSelectDiv div:first-child {
display: inline-block;
position: absolute;
top: 5px;
}
#testSelectOptions {
display: inline-block;
border: 1px solid #f1deb7;
background: #ffffeb;
position: absolute;
top: 38px;
left: 8px;
}
ul {
list-style: none;
text-align: left;
padding: 0;
margin: 0;
position: absolute;
}
li {
border-left: 1px solid #cd9e6f;
border-right: 1px solid #cd9e6f;
background: #fff7e2;
cursor: pointer;
position: static;
line-height: 24px;
height: 24px;
padding-left: 5px;
}
li.first-child {
border-top: 1px solid #cd9e6f;
}
li.last-child {
border-bottom: 1px solid #cd9e6f;
}
li:hover {
background-color: #FAEAC6;
}
<label for="test" style="padding:0px;margin:0px">
<select id="test" style="display:none">
<option value="0"> None</option>
<option value="12"> 12h</option>
<option value="24" selected="selected"> 24h</option>
<option value="36"> 36h</option>
<option value="48"> 48h</option>
<option value="96"> 96h</option>
</select>
<div id="testSelectDiv"><div></div></div>
<div id="testSelectOptions" style="display:none"></div>
</label>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
All the above code is on this Fiddle.

jquery popups instance duplication problem

can someone take a look at the code here is the problem screenshot
enter image description here
when clicking on sidebar user a popup appears after clicking on popup header it will go down and then if someone will click on the same user from sidebar a duplicate instance is created and click on the head will make the first one appear and 2nd one to go down.
I want to stop that duplication when someone clicks on sidebar user again then the already generated popup will toggle.
https://jsfiddle.net/hamzasgd/Lqyajokp/4/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook like chat popup layout</title>
</head>
<body>
<div id="chat-sidebar">
<div id="sidebar-user-box" class="100">
<img src="user.png" />
<span id="slider-username">User 1</span>
</div>
<div id="sidebar-user-box" class="200">
<img src="user.png" />
<span id="slider-username">User 2</span>
</div>
</div>
</body>
</html>
$(document).ready(function(){
var arr = []; // List of users
$(document).on('click', '.msg_head', function() {
var chatbox = $(this).parents().attr("rel") ;
$('[rel="'+chatbox+'"] .msg_wrap').slideToggle('slow');
return false;
});
$(document).on('click', '.close', function() {
var chatbox = $(this).parents().parents().attr("rel") ;
$('[rel="'+chatbox+'"]').hide();
arr.splice($.inArray(chatbox, arr), 1);
displayChatBox();
return false;
});
$(document).on('click', '#sidebar-user-box', function() {
var userID = $(this).attr("class");
var username = $(this).children().text() ;
if ($.inArray(userID, arr) != -1)
{
arr.splice($.inArray(userID, arr), 1);
}
arr.unshift(userID);
chatPopup = '<div class="msg_box" style="right:270px" rel="'+ userID+'">'+
'<div class="msg_head">'+username +
'<div class="close">x</div> </div>'+
'<div class="msg_wrap"> <div class="msg_body"> <div class="msg_push"></div> </div>'+
'<div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div> </div> </div>' ;
$("body").append( chatPopup );
displayChatBox();
});
$(document).on('keypress', 'textarea' , function(e) {
if (e.keyCode == 13 ) {
var msg = $(this).val();
$(this).val('');
if(msg.trim().length != 0){
var chatbox = $(this).parents().parents().parents().attr("rel") ;
$('<div class="msg-right">'+msg+'</div>').insertBefore('[rel="'+chatbox+'"] .msg_push');
$('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
}
}
});
function displayChatBox(){
i = 270 ; // start position
j = 260; //next position
$.each( arr, function( index, value ) {
if(index < 4){
$('[rel="'+value+'"]').css("right",i);
$('[rel="'+value+'"]').show();
i = i+j;
}
else{
$('[rel="'+value+'"]').hide();
}
});
}
});

I've added a check that will look if you already have a chatbox with that userID:
var exist = $('.msg_box[rel="' + userID + '"]').length;
if (exist == 0) {
arr.unshift(userID);
chatPopup = '<div class="msg_box" style="right:270px" rel="' + userID + '">' +
'<div class="msg_head">' + username +
'<div class="close">x</div> </div>' +
'<div class="msg_wrap"> <div class="msg_body"> <div class="msg_push"></div> </div>' +
'<div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div> </div> </div>';
$("body").append(chatPopup);
displayChatBox();
}
Please note that you have some invalid html. You are not allowed, to have the id on multiple element.
Demo
$(document).ready(function() {
var arr = []; // List of users
$(document).on('click', '.msg_head', function() {
var chatbox = $(this).parents().attr("rel");
$('[rel="' + chatbox + '"] .msg_wrap').slideToggle('slow');
return false;
});
$(document).on('click', '.close', function() {
var chatbox = $(this).parents().parents().attr("rel");
$('[rel="' + chatbox + '"]').hide();
arr.splice($.inArray(chatbox, arr), 1);
displayChatBox();
return false;
});
$(document).on('click', '#sidebar-user-box', function() {
var userID = $(this).attr("class");
var username = $(this).children().text();
if ($.inArray(userID, arr) != -1) {
arr.splice($.inArray(userID, arr), 1);
}
var exist = $('.msg_box[rel="' + userID + '"]').length;
if (exist == 0) {
arr.unshift(userID);
chatPopup = '<div class="msg_box" style="right:270px" rel="' + userID + '">' +
'<div class="msg_head">' + username +
'<div class="close">x</div> </div>' +
'<div class="msg_wrap"> <div class="msg_body"> <div class="msg_push"></div> </div>' +
'<div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div> </div> </div>';
$("body").append(chatPopup);
displayChatBox();
} else {
$('.msg_box[rel="' + userID + '"] .msg_wrap').slideToggle('slow');
}
});
$(document).on('keypress', 'textarea', function(e) {
if (e.keyCode == 13) {
var msg = $(this).val();
$(this).val('');
if (msg.trim().length != 0) {
var chatbox = $(this).parents().parents().parents().attr("rel");
$('<div class="msg-right">' + msg + '</div>').insertBefore('[rel="' + chatbox + '"] .msg_push');
$('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
}
}
});
function displayChatBox() {
i = 270; // start position
j = 260; //next position
$.each(arr, function(index, value) {
if (index < 4) {
$('[rel="' + value + '"]').css("right", i);
$('[rel="' + value + '"]').show();
i = i + j;
} else {
$('[rel="' + value + '"]').hide();
}
});
}
});
/**** Chat Popup Layout******/
body {
background: #e5e5e5;
font-family: sans-serif;
}
.msg_box {
position: fixed;
bottom: -5px;
width: 250px;
background: white;
border-radius: 5px 5px 0px 0px;
}
.msg_head {
background: black;
color: white;
padding: 8px;
font-weight: bold;
cursor: pointer;
border-radius: 5px 5px 0px 0px;
}
.msg_body {
background: white;
height: 200px;
font-size: 12px;
padding: 15px;
overflow: auto;
overflow-x: hidden;
}
.msg_input {
width: 100%;
height: 55px;
border: 1px solid white;
border-top: 1px solid #DDDDDD;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.close {
float: right;
cursor: pointer;
}
.minimize {
float: right;
cursor: pointer;
padding-right: 5px;
}
.msg-left {
position: relative;
background: #e2e2e2;
padding: 5px;
min-height: 10px;
margin-bottom: 5px;
margin-right: 10px;
border-radius: 5px;
word-break: break-all;
}
.msg-right {
background: #d4e7fa;
padding: 5px;
min-height: 15px;
margin-bottom: 5px;
position: relative;
margin-left: 10px;
border-radius: 5px;
word-break: break-all;
}
/**** Slider Layout Popup *********/
#chat-sidebar {
width: 250px;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #b2b2b2;
}
#sidebar-user-box {
padding: 4px;
margin-bottom: 4px;
font-size: 15px;
font-family: Calibri;
font-weight: bold;
cursor: pointer;
}
#sidebar-user-box:hover {
background-color: #999999;
}
#sidebar-user-box:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
img {
width: 35px;
height: 35px;
border-radius: 50%;
float: left;
}
#slider-username {
float: left;
line-height: 30px;
margin-left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chat-sidebar">
<div id="sidebar-user-box" class="100">
<img src="user.png" />
<span id="slider-username">User 1</span>
</div>
<div id="sidebar-user-box" class="200">
<img src="user.png" />
<span id="slider-username">User 2</span>
</div>
</div>

Javascript uploading file alignment

In the above image the delete button need to align properly. in my code it get align based on file name length.
<script>
var filelist = new Array();
updateList = function () {
var input = document.getElementById('fileUploader');
var output = document.getElementById('divFiles');
var HTML = "<table>";
for (var i = 0; i < input.files.length; ++i) {
filelist[i]=input.files.item(i).name;
HTML += "<tr><td>" + filelist[i] + "</td><td> <button ></button></td></tr>";
}
HTML += "</table>";
output.innerHTML += HTML;
}
</script>

Please try this.
table {
border-collapse: separate;
border-spacing: 0 3px;
width: 600px;
}

Try this
table
{
table-layout: fixed;
width: 300px;
}
td
{
border: 1px solid green;
word-wrap:break-word;
}
try jsfiddle

<style>
table {
border-collapse: separate;
border-spacing: 0 2px;
width: 600px;
table-layout: fixed;
}
tr:nth-child(1n) {
border: 2px solid;
background-color: #eceff1;
color: Black;
}
tr:nth-child(2n) {
border: 2px solid;
color: Black;
}
td {
padding-top: .5em;
padding-left: .5em;
padding-right: .5em;
padding-bottom: .5em;
}
input[type="file"] {
display: none;
}
.label1 {
padding: 3px;
background: #fff;
display: table;
color:black;
}
button {
background-image: url('../../Images/delete.ico');
background-size: cover;
padding-right:0px;
background-color: Transparent;
cursor: pointer;
border: none;
width: 30px;
height: 30px;
}
</style>
<script>
$(document).ready(function () {
$(document).on('click', "button", function (e) {
$(this).closest('tr').remove();
});
});
</script>
<script>
var filelist = new Array();
updateList = function () {
var input = document.getElementById('fileUploader');
var output = document.getElementById('divFiles');
var HTML = "<table>";
for (var i = 0; i < input.files.length; ++i) {
filelist[i]=input.files.item(i).name;
HTML += "<tr><td>" + filelist[i] + "</td><td><button ></button></td></tr>";
}
HTML += "</table>";
output.innerHTML += HTML;
}
</script>
In the above script the delete button is showing in fixed order but i want the file name to be aligned at left and delete button need to at right side corner.

Inserting input field to chat popup

I am trying to learn by creating a chat bar. I have created a side nav bar with users and once I click the chat pop up box will open at the bottom. I want to add input field to that chatbox.
I tried to add the input field but I just got half success; it just gets added to the body not at the bottom of the chat box.
chat.html
<script>
//this function can remove a array element.
Array.remove = function(array, from, to) {
var rest = array.slice((to || from) + 1 || array.length);
array.length = from < 0 ? array.length + from : from;
return array.push.apply(array, rest);
};
var total_popups = 0;
//arrays of popups ids
var popups = [];
function close_popup(id)
{
for(var iii = 0; iii < popups.length; iii++)
{
if(id == popups[iii])
{
Array.remove(popups, iii);
document.getElementById(id).style.display = "none";
calculate_popups();
return;
}
}
}
function display_popups()
{
var right = 220;
var iii = 0;
for(iii; iii < total_popups; iii++)
{
if(popups[iii] != undefined)
{
var element = document.getElementById(popups[iii]);
element.style.right = right + "px";
right = right + 320;
element.style.display = "block";
}
}
for(var jjj = iii; jjj < popups.length; jjj++)
{
var element = document.getElementById(popups[jjj]);
element.style.display = "none";
}
}
function register_popup(id, name)
{
for(var iii = 0; iii < popups.length; iii++)
{
//already registered. Bring it to front.
if(id == popups[iii])
{
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
element = element + '<div class="popup-head">';
element = element + '<div class="popup-head-left">'+ name +'</div>';
element = element + '<div class="popup-head-right">✕</div>';
element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';
element = element + '<div class="popup-bottom"><div class="popup-bottom"><div id="'+ id +'"></div><input id="field"></div>';
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
popups.unshift(id);
calculate_popups();
}
//calculate the total number of popups suitable and then populate the toatal_popups variable.
function calculate_popups()
{
var width = window.innerWidth;
if(width < 540)
{
total_popups = 0;
}
else
{
width = width - 200;
//320 is width of a single popup box
total_popups = parseInt(width/320);
}
display_popups();
}
//recalculate when window is loaded and also when window is resized.
window.addEventListener("resize", calculate_popups);
window.addEventListener("load", calculate_popups);
</script>
style.css
<style>
#media only screen and (max-width : 540px)
{
.chat-sidebar
{
display: none !important;
}
.chat-popup
{
display: none !important;
}
}
body
{
background-color: #e9eaed;
}
.chat-sidebar
{
width: 200px;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
}
.sidebar-name
{
padding-left: 10px;
padding-right: 10px;
margin-bottom: 4px;
font-size: 12px;
}
.sidebar-name span
{
padding-left: 5px;
}
.sidebar-name a
{
display: block;
height: 100%;
text-decoration: none;
color: inherit;
}
.sidebar-name:hover
{
background-color:#e1e2e5;
}
.sidebar-name img
{
width: 32px;
height: 32px;
vertical-align:middle;
}
.popup-box
{
display: none;
position: absolute;
bottom: 0px;
right: 220px;
height: 285px;
background-color: rgb(237, 239, 244);
width: 300px;
border: 1px solid rgba(29, 49, 91, .3);
}
.popup-box .popup-head
{
background-color: #009688;
padding: 5px;
color: white;
font-weight: bold;
font-size: 14px;
clear: both;
}
.popup-box .popup-head .popup-head-left
{
float: left;
}
.popup-box .popup-head .popup-head-right
{
float: right;
opacity: 0.5;
}
.popup-box .popup-head .popup-head-right a
{
text-decoration: none;
color: inherit;
}
.popup-box .popup-bottom .popup-head-left
{
position:absolute;
left: 0px;
bottom: 0px
text-decoration: none;
color: inherit;
}
.popup-box .popup-messages
{
height: 100%;
overflow-y: scroll;
}
</style>

posting relevant parts hopw you can make sense of it.
HTML
<div class="popup-box chat-popup">
<div class="popup-head">
<div class="popup-head-left">name</div>
<div class="popup-head-right">✕</div>
<div style="clear: both"></div>
</div>
<div class="popup-messages"></div>
<div class="popup-bottom-container">
<div class="popup-bottom">
<div id="'+ id +'"></div>
<input type="text" id="field">
</div>
</div>
</div>
CSS
.popup-bottom
{
position:absolute;
left: 0px;
bottom: 10px;
text-decoration: none;
color: inherit;
}
.popup-box .popup-messages
{
height: 200px;
overflow-y: scroll;
}
It is always better to try out your layout in plain html before testing with js

Select parent div attribute in a for generated content

I am trying to select an attribute in a parent div, but no luck so far.
The HTML:
<div class="build">
<div class="items">
<div class="craft shop" qnt="1"></div>
<div class="craft shop" qnt="5"></div>
</div>
</div>
The JS:
var ITEMS = [
{
"item":"shop",
"prefix":"custom",
"icon": "shop",
"type": "shop"}];
for (var i = 0; i < ITEMS.length; i++)
{
var items = ITEMS[i];
var quantity = $(".craft." + items['item']).attr("qnt");
$(".craft." + items['item']).html
('<a class="item-block item-' + items['type'] + '" href="' + items['prefix'] + '-' + items['item'] + '.html">'+
'<i class="' + items['icon'] + '"></i>' +
'<span class="name" data-i18n="' + items['item'] + '">' + items['item'] + '</span>'+
'<span class="qnt">x' + quantity +'</span>'+
'</a>')};
So when I use <div class="craft shop" qnt="1"></div> it generates this:
<div class="craft shop" qnt="1">
<a class="item-block item-shop" href="custom-shop.html">
<i class="shop"></i><span class="name" data-i18n="shop">shop</span>
<span class="qnt">x1</span>
</a>
</div>
<div class="craft shop" qnt="5">
<a class="item-block item-shop" href="custom-shop.html">
<i class="shop"></i><span class="name" data-i18n="shop">shop</span>
<span class="qnt">x5</span>
</a>
</div>
I am trying to display the quantity from the attribute "qnt", but I am having problems to select it.
See how the second block uses the same qunatity of the first one?
I already tried:
var quantity = $(this).parent().parent().attr("qnt");
and it didn't worked.
Example in codepen: https://codepen.io/RHenri/pen/BWNVpw

Basically you need a another loop to select a particular instance at time. So that you can apply quantity and other values based on that particular div.
You are using $(".craft." + items['item']).attr("qty") to get value of qty attribute from a div which always return first div that match that class name. And then you again using that name to set html to all div which added same html content to all matching div with that particular name.
To get valve from each div and add html accordingly you need another loop to go through all element that are selected by a particular class name.
For this i am using $.each()
Try this.
var ITEMS = [{
"item": "shop",
"prefix": "custom",
"icon": "shop",
"type": "shop"
}];
for (var i = 0; i < ITEMS.length; i++) {
var items = ITEMS[i];
var quantity = $(".craft." + items['item']).data("qnt");
$(".craft." + items['item']).each(function(i, v) {
var quantity = $(this).data("qnt");
$(this).html('<a class="item-block item-' + items['type'] + '" href="' + items['prefix'] + '-' + items['item'] + '.html">' +
'<i class="' + items['icon'] + '"></i>' +
'<span class="name" data-i18n="' + items['item'] + '">' + items['item'] + '</span>' +
'<span class="qnt">x' + quantity + '</span>' +
'</a>')
});
};
.item-list .item-block,
.build .item-block {
display: block;
color: #fff;
margin: 0px;
padding: 0px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.50);
cursor: pointer;
min-width: 220px;
text-align: center;
width: 300px;
}
.item-list .items .item-block i,
.build .items .item-block i {
width: 32px;
height: 32px;
background-size: contain;
float: left;
}
.item-list .item-block .name,
.build .item-block .name {
display: inline-block;
font-family: 'Roboto', Microsoft YaHei;
font-size: 12px;
line-height: 32px;
color: #fff;
padding: 0 5px;
width: 135px;
text-align: center;
}
.item-list .items .item-block i,
.build .items .item-block i {
width: 32px;
height: 32px;
background-size: contain;
float: left;
}
.none {
display: none;
}
.item-list .item-block .qnt,
.build .item-block .qnt {
line-height: 32px;
display: inline-block;
color: #ffffff;
font-family: 'Roboto', Microsoft YaHei;
font-weight: 400;
padding: 0px 10px 0px 0px;
float: right;
}
.item-shop {
background-color: #1e7ea9;
}
.shop {
background-image: url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/64/shop-icon.png);
background-color: #25a9ae;
}
.craft {
background-image: none;
display: inline-block;
width: 300px;
margin: 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="build">
<div class="items">
<div class="craft shop" data-qnt="1"></div>
<div class="craft shop" data-qnt="5"></div>
</div>
</div>