We Keep Coding

JS Sort Table - Sort Indicators

I've built this table with a sort function and now I'm also trying to set a class for the selected th so I can put some arrows with CSS, as sort indicators.
I need a way to set dynamic .asc and .desc classes to my selected th with JS somewhere on my sortTable() ..
It also needs to be Pure JS.
var myData, asc = {'userId':true, 'id':true, 'title':true, 'completed':true};
var myRequest = new XMLHttpRequest();
myRequest.open('GET', 'https://jsonplaceholder.typicode.com/todos');
myRequest.onload = function () {
myData = JSON.parse(myRequest.responseText);
dataTable(myData);
};
myRequest.send();
function dataTable(data) {
if (data.length > 0) {
var temp = '';
data.forEach((u) => {
temp += '<tr>';
temp += "<td style='text-align: center'>" + u.userId + '</td>';
temp += "<td style='text-align: center'>" + u.id + '</td>';
temp += '<td>' + u.title + '</td>';
temp += "<td style='text-align: center'>" + u.completed + '</td>';
temp += "<td>" + '<input type="button" value="Delete" onclick="deleteRow(this)"> <input type="button" value="Edit" onclick="insertToForm(this)">' + '</td></tr>';
document.getElementById('data').innerHTML = temp;
});
}
}
function sortTable(col){
myData.sort(function(a, b) {
if(asc[col]){
return a[col] > b[col]? 1:-1;
}
else{
return a[col] > b[col]? -1:1;;
}
});
asc[col] = !asc[col];
document.getElementById('data').innerHTML = '';
dataTable(myData);
}
.container{
display: flex;
margin: 25px 10px;
}
.my-table {
border-collapse: collapse;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
margin-right: 15px;
}
.my-table td, th {
padding: 12px 15px;
}
.my-table thead {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.my-table th {
background-color: #009879;
color: #ffffff;
text-align: left;
cursor: pointer;
}
.my-table tbody tr {
border-bottom: 1px solid #dddddd;
}
tbody tr input {
width: 50px;
}
.my-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.my-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
<table id="table" class="my-table">
<thead>
<tr>
<th id="tbl-head-userid" onclick="sortTable('userId');">UserID</th>
<th id="tbl-head-id" onclick="sortTable('id');">ID</th>
<th id="tbl-head-title" onclick="sortTable('title');">Title</th>
<th id="tbl-head-completed" onclick="sortTable('completed');">Completion</th>
<th>Action</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>

I have edited the snipped. arrow buttons will be shown when the <th> is clicked and the icons on the other headers will be removed
var myData, asc = {'userId':true, 'id':true, 'title':true, 'completed':true};
var myRequest = new XMLHttpRequest();
myRequest.open('GET', 'https://jsonplaceholder.typicode.com/todos');
myRequest.onload = function () {
myData = JSON.parse(myRequest.responseText);
dataTable(myData);
};
myRequest.send();
function dataTable(data) {
if (data.length > 0) {
var temp = '';
data.forEach((u) => {
temp += '<tr>';
temp += "<td style='text-align: center'>" + u.userId + '</td>';
temp += "<td style='text-align: center'>" + u.id + '</td>';
temp += '<td>' + u.title + '</td>';
temp += "<td style='text-align: center'>" + u.completed + '</td>';
temp += "<td>" + '<input type="button" value="Delete" onclick="deleteRow(this)"> <input type="button" value="Edit" onclick="insertToForm(this)">' + '</td></tr>';
document.getElementById('data').innerHTML = temp;
});
}
}
function sortTable(col, e){
myData.sort(function(a, b) {
if(asc[col]){
return a[col] > b[col]? 1:-1;
}
else{
return a[col] > b[col]? -1:1;;
}
});
asc[col] = !asc[col];
document.getElementById('data').innerHTML = '';
dataTable(myData);
var currentTarget = e.currentTarget;
Array.from(currentTarget.parentElement.children).forEach(function(ele) {
ele.classList.remove('asc', 'des');
})
if(!asc[col]) {
currentTarget.classList.add('asc');
} else {
currentTarget.classList.add('des');
}
}
.container{
display: flex;
margin: 25px 10px;
}
.my-table {
border-collapse: collapse;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
margin-right: 15px;
}
.my-table td, th {
padding: 12px 15px;
}
.my-table thead {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.my-table th {
background-color: #009879;
color: #ffffff;
text-align: left;
cursor: pointer;
}
.my-table tbody tr {
border-bottom: 1px solid #dddddd;
}
tbody tr input {
width: 50px;
}
.my-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.my-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
th {
position: relative;
}
th.asc:before,
th.des:after {
border: 4px solid transparent;
content: "";
display: block;
height: 0;
right: 5px;
top: 50%;
position: absolute;
width: 0;
}
th.asc:before {
border-bottom-color: #fff;
margin-top: -5px;
}
th.des:after {
border-top-color: #ffff;
}
<table id="table" class="my-table">
<thead>
<tr>
<th id="tbl-head-userid" onclick="sortTable('userId', event);">UserID</th>
<th id="tbl-head-id" onclick="sortTable('id', event);">ID</th>
<th id="tbl-head-title" onclick="sortTable('title', event);">Title</th>
<th id="tbl-head-completed" onclick="sortTable('completed', event);">Completion</th>
<th>Action</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>

How to show two html tables using different table id's?

I want to display two html tables using different table id's. I am able to display one table but I am not able to display the second table and not figure it out where I am making error.
Code is given below:
var $container = $("#container");
var $row = $("#container table tbody tr");
// Loop through items in JSON data..
var $button = $("<button>" + 'xyz' + "</button>");
$container.prepend($button);
var table = $("<table1>");
table.append($("<tr><th>column1</th><th>column2</th></tr>"));
// Button click handler..
$button.on("click", function(e) {
e.preventDefault();
for( var i=0; i<2; i++) {
// Replace row HTML..
//parent row
var row=$('<tr ><td>' + 'data' + '</td>' + + '<td>' + "" + '</td></tr>');
table.append(row);
for(var j =0; j<2; j++) {
var row=$('<tr><td>' + "" + '</td></tr>');
$('<td>data</td>')
.on('click', function() {
//I want to display table2 when clicked on col2 data
var table = $("<table2>");
table.append($("<tr><th>col1</th><th>col2</th></tr >"));
var row=$('<tr><td>' + 'data' + '</td>' + + '<td>' + "" + '</td></tr>');
table.append(row);
})
.appendTo(row);
table.append(row);
$("#table2").html(table);
}
}
$("#table1").html(table);
// Show table if it's not already visible..
});
#table2 {
margin-top: 20px;
border-collapse: collapse;
border: 1px solid silver;
width: 500px;
}
#table1 {
margin-top: 20px;
border-collapse: collapse;
border: 1px solid silver;
width: 500px;
}
#table1 th {
border: 1px solid black;
text-align: left;
}
#table1 td {
border: 1px solid black;
text-align: left;
}
#table1 tr {
background-color: #f2f2f2;
}
button {
margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="table1">
</div>
</div>
<div id="table2">
</div>
I want to show second table when i click on values of column2. Kindly guide me how to fix this issue.
Here is the full code- https://jsfiddle.net/gaurav10022/styjk9vr/48/

You should first append the table column values after that apply click event on the last column.
Try below code or go through JSFiddle
var $container = $("#container");
var m = ['data','data1'];
// Loop through items in JSON data..
var $button = $("<button>" + 'xyz' + "</button>");
$container.prepend($button);
var table = $("<table>");
table.append($("<tr><th>column1</th><th>column2</th></tr>"));
// Button click handler..
$button.on("click", function(e) {
e.preventDefault();
for (var i = 0; i < 2; i++) {
// Replace row HTML..
//parent row
var row = $('<tr ><td>' + 'data' + '</td><td>' + "" + '</td></tr>');
table.append(row);
for (var j = 0; j < 2; j++) {
//child row
var row = $('<tr><td>' + "" + '</td><td>' + m[j] + '</td></tr>');
$(row).find('td:last').on('click', function() {
// second table
var tempData = $(this).text();
var table2 = $("<table>");
table2.append($("<tr><th>col1</th><th>col2</th></tr >"));
var row = $('<tr class="parent_row" ><td>' + tempData + '</td>' + +'<td>' + "" + '</td></tr>');
table2.append(row);
$("#table2").html(table2);
})
table.append(row);
}
}
$("#table1").html(table);
// Show table if it's not already visible..
});
#table2 {
margin-top: 20px;
border-collapse: collapse;
border: 1px solid silver;
width: 500px;
}
#table1 {
margin-top: 20px;
border-collapse: collapse;
border: 1px solid silver;
width: 500px;
}
#table1 th {
border: 1px solid black;
text-align: left;
}
#table1 td {
border: 1px solid black;
text-align: left;
}
#table1 tr {
background-color: #f2f2f2;
}
button {
margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="table1">
</div>
</div>
<div id="table2">
</div>

jQuery selectors are obsolete today (i.e. they can't produce live collections). $('<td>data</td>') will give you empty result, so no onclick is added. This will give you your desired collection:
table1.querySelectorAll("td:nth-child(2)")
td:nth-child(2) selects cells of second column on the called object (table1). Then you can hook the onclick event in loop to every item in the collection.

How to align legend elements dynamically?

Question
How do I align the ticks and text labels with the colour gradient, and so that the legend container expands to contain those elements
Notes
The colour gradient, ticks and labels have to be created dynamically in JS
The width of labels will vary, so the legend container has to expand accordingly
I can't use JQuery
I'm not a javascript/html/css developer, so happy to hear alternative approaches
HTML
<div id="legend"></div>
Javascript
var legend = document.getElementById("legend");
var divColours = document.createElement('div');
var jsColours = ["#440154", "#443A83", "#31688E", "#21908C", "#35B779", "#8FD744", "#FDE725"];
var colours = '(' + jsColours.join() + ')';
style = 'height: ' + jsColours.length * 20 + 'px; width: 10px; ';
style += 'background: ' + jsColours[1] + ';';
style += 'background: -webkit-linear-gradient' + colours + ';'
style += 'background: -o-linear-gradient' + colours + ';'
style += 'background: -moz-linear-gradient' + colours + ';'
style += 'background: linear-gradient' + colours + ';'
divColours.setAttribute('style', style);
legend.appendChild(divColours);
for (var i = 0; i < 7; i++) {
var left = 10 + 10 + 1;
var top = 10 + (i * 20);
var tick = 'position: absolute; top: ' + top + 'px; left: ' + left + 'px; width: 3px; height: 1px; background: #b8b9ba;';
var tickVal = 'position: absolute; top: ' + (top - 5) + 'px; left: ' + (left + 5) + 'px; background: red; color: #b8b9ba;';
var divTicks = document.createElement('div');
var divVal = document.createElement('div');
divTicks.setAttribute('style', tick);
divVal.setAttribute('style', tickVal);
divVal.innerHTML = ' this is a variable ' + i;
legend.appendChild(divTicks);
legend.appendChild(divVal);
}
CSS
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 1px solid #b8b8b8;
border-radius: 4px;
height: auto;
display: inline-block;
}
Working Demo
JSFiddle
Related
I'm trying to adapt this answer

I wrapped your ticks on a parent div tag and appended ticks inside it.
Replace your current JavaScript code with following one. I think you want something like this.
JavaScript
var legend = document.getElementById("legend");
var divColours = document.createElement('div');
var jsColours = ["#440154", "#443A83", "#31688E", "#21908C", "#35B779", "#8FD744", "#FDE725"];
var colours = '(' + jsColours.join() + ')';
style = 'height: ' + jsColours.length * 20 + 'px; width: 10px; ';
style += 'background: ' + jsColours[1] + ';';
style += 'background: -webkit-linear-gradient' + colours + ';'
style += 'background: -o-linear-gradient' + colours + ';'
style += 'background: -moz-linear-gradient' + colours + ';'
style += 'background: linear-gradient' + colours + ';'
divColours.setAttribute('style', style);
legend.appendChild(divColours);
var divTicksParent = document.createElement('div');
divTicksParent.style.position = "absolute";
divTicksParent.style.width = "200px";
divTicksParent.style.top = "28px";
legend.appendChild(divTicksParent);
for (var i = 0; i < 7; i++) {
var left = 10;
var top = (i * 23) + (1);
var tick = 'position: absolute; top: ' + top + 'px; left: ' + left + 'px; width: 6px; height: 1px; background: #b8b9ba;';
var tickVal = 'position: absolute; top: ' + (top - 6) + 'px; left: ' + (left + 12) + 'px; color: #b8b9ba; font-size: 12px;';
var divTicks = document.createElement('div');
var divVal = document.createElement('div');
divTicks.setAttribute('style', tick);
divVal.setAttribute('style', tickVal);
divVal.innerHTML = ' this is a variable ' + i;
divTicksParent.appendChild(divTicks);
divTicksParent.appendChild(divVal);
}
CSS
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 1px solid #b8b8b8;
border-radius: 4px;
height: auto;
width: 130px;
display: inline-block;
}

<head>
<style>
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 1px solid #b8b8b8;
border-radius: 4px;
display:inline-flex;
}
</style>
</head>
<body onload="myFunc()">
<div id="legend"></div>
<script>
function myFunc(){
var legend = document.getElementById("legend");
var divColours = document.createElement('div');
var jsColours = ["#440154", "#443A83", "#31688E", "#21908C", "#35B779", "#8FD744", "#FDE725"];
var colours = '(' + jsColours.join() + ')';
style = 'height: ' + jsColours.length * 20 + 'px; width: 10px; ';
style += 'background: ' + jsColours[1] + ';';
style += 'background: -webkit-linear-gradient' + colours + ';'
style += 'background: -o-linear-gradient' + colours + ';'
style += 'background: -moz-linear-gradient' + colours + ';'
style += 'background: linear-gradient' + colours + ';'
divColours.setAttribute('style', style);
legend.appendChild(divColours);
var divTicksParent = document.createElement('div');
divTicksParent.style.position = "relative";
divTicksParent.style.width = "170px";
legend.appendChild(divTicksParent);
for (var i = 0; i < 7; i++) {
var left = 20;
var top = (i * 23) + (1);
var tick = 'position: absolute; top: ' + top + 'px; left: ' + left + 'px; width: 8px; height: 1px; background: #b8b9ba;';
var tickVal = 'position: absolute; top: ' + (top - 8) + 'px; left: ' + (left + 15) + 'px; background: red; color: #b8b9ba;';
var divTicks = document.createElement('div');
var divVal = document.createElement('div');
divTicks.setAttribute('style', tick);
divVal.setAttribute('style', tickVal);
divVal.innerHTML = ' this is a variable ' + i;
divTicksParent.appendChild(divTicks);
divTicksParent.appendChild(divVal);
}
};
</script>
</body>
check the demo, I've updated

The other solutions didn't quite answer my question about auto-sizing the width based on the content.
I think this resolves my problem
Updated fiddle
Javascript
var legend = document.getElementById("legend");
var tickContainer = document.createElement("div");
tickContainer.setAttribute('class', 'labelContainer');
var labelContainer = document.createElement("div");
labelContainer.setAttribute('class', 'labelContainer');
var legendColours = document.createElement('div');
var jsColours = ["#440154", "#443A83", "#31688E", "#21908C", "#35B779", "#8FD744", "#FDE725"];
var colours = '(' + jsColours.join() + ')';
style = 'display: inline-block; height: ' + jsColours.length * 20 + 'px; width: 10px;';
style += 'background: ' + jsColours[1] + ';';
style += 'background: -webkit-linear-gradient' + colours + ';'
style += 'background: -o-linear-gradient' + colours + ';'
style += 'background: -moz-linear-gradient' + colours + ';'
style += 'background: linear-gradient' + colours + ';'
legendColours.setAttribute('style', style);
legend.appendChild(legendColours);
for (var i = 0; i < jsColours.length; i++) {
var tickVal = 'text-align: center; color: #b8b9ba; font-size: 12px; height: 20px;';
var divTicks = document.createElement('div');
var divVal = document.createElement('div');
divTicks.setAttribute('style', tickVal);
divTicks.innerHTML = '-';
tickContainer.appendChild(divTicks);
divVal.setAttribute('style', tickVal);
divVal.innerHTML = ' this is a variable ' + i;
labelContainer.appendChild(divVal);
}
legend.appendChild(tickContainer);
legend.appendChild(labelContainer);
CSS
.legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 8px;
margin: 8px;
border: 1px solid #b8b8b8;
border-radius: 4px;
display:inline-flex;
}
.labelContainer{
border: 1px solid #00FF00;
padding-left: 4px;
height: auto;
display: inline-block;
}

Javascript, how to add multiple buttons and link same Onclick function with different value

i have a simple question, but dont know how to do it. I want to add multiple button in javascript, add ONE onclick and the button have to send the right value;
The right value in this exemple is : Hello", "Bye" or "Hey Gary
My button function dont work and i dont know how to send the right value, help me please
thank you!
html
<div id="main"> </div>
javascript
info = ["Hello", "Bye", "Hey Gary"];
for (i = 0; i < 3; i++){
document.getElementById('main').innerHTML += "<a id='" + info[i] + "' class='list-group-item'>"+info[i]+"</a>";
document.getElementById(info[i]).innerHTML += "<input class='btn btn-danger pull-right' class='test77' value='send'>";
document.getElementById('main').innerHTML += "<br><hr></hr>";
}
createbutton();
function createbutton() {
$(".test77").click(function () {
alert("i want to send information at the left");
});
}
Jsfiddle
https://jsfiddle.net/prodeinfo/sep1jzpc/2/

your input should be of type="button", and you have the button's class defined twice.
info = ["Hello", "Bye", "Hey Gary"];
for (var i = 0; i < info.length; i++) {
document.getElementById('main').innerHTML += "<a id='" + info[i] + "' class='list-group-item'><span>" + info[i] + "</span></a>";
document.getElementById(info[i]).innerHTML += "<input type='button' class='btn btn-danger pull-right test77' value='send'>";
document.getElementById('main').innerHTML += "<br><hr></hr>";
}
createbutton();
function createbutton() {
$(".test77").click(function() {
alert($(this).parent().find('span').text());
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main"></div>

The question is not much clear about what LEFT is. But probably you are asking for the following.
function createbutton() {
$(".test77").click(function (e) {
var text = e.target.previousSibling.innerText;
alert(text);
});
}

Is that what are you looking for?
$(document).ready(function() {
var info = ["Hello", "Bye", "Hey Gary"];
for (i = 0; i < 3; i++){
document.getElementById('main').innerHTML += "<a id='" + info[i] + "' class='list-group-item'>"+info[i]+"</a>";
document.getElementById(info[i]).innerHTML += "<input class='myBtn btn btn-danger pull-right' class='test77' value='send'>";
document.getElementById('main').innerHTML += "<br><hr></hr>";
}
createbutton();
function createbutton() {
$(".myBtn").click(function () {
var value = $(this).closest("a").text();
alert(value);
});
}
});
.pull-right {
float: right!important;
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="main"> </div>

Why is append() not attaching itself to a div but it is appending to the heading h2

In the below code, why aren't the values in the array appending to the div element but I am able to append it to the heading? I am storing semicolon separated values in a local storage, then splitting each item and appending it to the div.
<!DOCTYPE html>
<html>
<head>
<title>To do</title>
<style type="text/css">
html {
overflow-y: scroll;
}
body {
padding: 0px;
margin: 0px;
font-family: Verdana, Geneva, sans-serif
}
h2 {
color: black;
text-align: center
}
#omnibox {
margin-left: 400px;
height: 30px;
width: 500px;
font-size: 14px;
padding: 10px;
position: center;
}
#searchWrapper {
margin-left: 500px
}
/*#omnibox,#listWrapper{margin:20px;position:center}*/
.searchable {
color: white;
display: block;
padding: 10px;
font-size: 16px;
background: #4298E8;
width: 300px;
margin-bottom: 10px
}
.searchable:hover {
background-color: #E8C420;
}
.delete {
display: block;
float: right;
height: 20px;
width: 20px;
line-height: 20px;
border-radius: 10px;
background-color: black;
color: white;
text-align: center;
font-size: 1em;
transform: rotate(-45deg);
}
.delete:hover {
background-color: #D8FFF1;
color: red;
cursor: pointer;
}
.comments {
margin-left: -10px;
margin-top: 10px;
width: 310px;
display: inline-block
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
console.log('ready');
$(function() {
// body...
$('#omnibox').focus();
if (window.localStorage) {
localStorage.setItem(1,"how do;you do");
localStorage.setItem(2,"ok;got it");
myList();
function myList() {
var list = "";
console.log('Items in Local Storage = ' + localStorage.length);
document.querySelector('h2').innerHTML = "To do - " + localStorage.length;
for (var i = localStorage.length - 1; i >= 0; i--) {
var itemKey = localStorage.key(i);
var values = new Array();
values = localStorage.getItem(itemKey);
values = values.split(";");
console.log("Array - " + values + " Items - " + values.length);
list += "<div class='searchable' id='" + itemKey + "'><span class='note'>" + itemKey + " " + values[0] + " </span><input type='text' class='comments' placeholder='Comments.'><br/></div>";
var myComments = ""
for (var j = values.length - 1; j >= 0; j--) {
console.log("Element - " + values[j] + " parentNode is " + itemKey);
myComments += '<span>' + ' ' + values[j] + ' ' + '</span>';
};
//Why doesn't this work?
$("#itemKey").append(myComments);
//This works though.
$("h2").append(myComments);
}
$("#listWrapper").html(list);
}
var todo = document.querySelector('#omnibox');
$('#omnibox').keyup(function(e) {
document.querySelector('.errorMessage').innerHTML = "";
if (e.keyCode == 13) {
var todoVal = document.querySelector('#omnibox').value;
if (!todoVal.match(/\S/)) {
console.log('Empty value entered.');
document.querySelector('.errorMessage').innerHTML = "Enter something!";
return false;
} else {
console.log("Some value entered.");
$(this).trigger("enterKey");
var remember = new Array();
myNote = document.querySelector('#omnibox').value;
$('#omnibox').val("");
document.location.reload(true);
return true;
}
}
});
}
});
</script>
</head>
<body>
<h2></h2>
<div id='searchWrapper'>
<div id="listAddWrapper">
<div id="empty"></div>
</div>
<div id="listWrapper">
</div>
</div>
</body>
</html>

You can't use a selector to find an element before you've added it to the DOM. Even if you could, your selector is wrong — it should be "#" + itemKey. But that doesn't matter because it won't work anyway; the element it would match is still just part of that list string you're building.
Looking at your code, I think the best thing to do is to add the comments to the text while you're building it.
list += "<div class='searchable' id='" + itemKey + "'><span class='note'>" + itemKey + " " + values[0] + " </span><input type='text' class='comments' placeholder='Comments.'><br/>";
var myComments = ""
for (var j = values.length - 1; j >= 0; j--) {
console.log("Element - " + values[j] + " parentNode is " + itemKey);
myComments += '<span>' + ' ' + values[j] + ' ' + '</span>';
};
list += myComments + "</div>";