We Keep Coding

How do I hide sort icon by default and show by click on column header name

I wanna to hide sorting icons by default and show them by clicking the column header name. This is my .cshtml code:
#model string[]
<style>
</style>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="tableHeader" id ="table">
<div class="card w-100 mb-1 border-0">
<div class="card-dark-mode-body text-dark headerRow fw-bolder mainColor" >
<div class="row p-2">
#foreach(var prop in Model)
{
<div class="col text-center d-table sortable" >
<div class="btn-group" id="sorting" onclick="sortingVisibility()">
<p class="mb-0 d-lg-table-cell align-middle" id="columnName" style='padding-top:3px'>
#prop
<div class="btn-group-vertical" style='padding-left: 20px;' id="divIcon">
<a href="/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=asc" class="btn btn-xs btn-link p-0">
<i class="fa fa-sort-up" style='color:white;' id="sortUpIcon" aria-hidden="true"></i>
</a>
<a href="/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=desc" class="btn btn-xs btn-link p-0">
<i class="fa fa-sort-down" style='color:white;' id="sortDownIcon" aria-hidden="true"></i>
#*<span class="glyphicon glyphicon-triangle-bottom" style='color:white;'></span>*#
</a>
</div>
</p>
</div>
</div>
}
</div>
</div>
</div>
</div>
#*location.href='/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=desc'*#
<script>
function sortingVisibility()
{
var iconUp = document.getElementById("sortUpIcon");
var iconDown = document.getElementById("sortDownIcon");
var div = document.getElementById("divIcon");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
I tried to do like this but its not working on click it only hide the icon and doesnt change anything.
Can anyone give me some hints about this?

In order to hide the div, you have to initially set the display property of the div to none and then we have to set the display property to block or none.
Below I have modified your code with the changes.
#model string[]
<style>
</style>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="tableHeader" id ="table">
<div class="card w-100 mb-1 border-0">
<div class="card-dark-mode-body text-dark headerRow fw-bolder mainColor" >
<div class="row p-2">
#foreach(var prop in Model)
{
<div class="col text-center d-table sortable" >
<div class="btn-group" id="sorting" onclick="sortingVisibility()">
<p class="mb-0 d-lg-table-cell align-middle" id="columnName" style='padding-top:3px'>
#prop
<div class="btn-group-vertical" style='padding-left: 20px;' id="divIcon">
<a href="/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=asc" class="btn btn-xs btn-link p-0">
<i class="fa fa-sort-up" style='color:white; display: none' id="sortUpIcon" aria-hidden="true"></i>
</a>
<a href="/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=desc" class="btn btn-xs btn-link p-0">
<i class="fa fa-sort-down" style='color:white; display: none' id="sortDownIcon" aria-hidden="true"></i>
#*<span class="glyphicon glyphicon-triangle-bottom" style='color:white;'></span>*#
</a>
</div>
</p>
</div>
</div>
}
</div>
</div>
</div>
</div>
#*location.href='/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=desc'*#
<script>
function sortingVisibility()
{
var iconUp = document.getElementById("sortUpIcon");
var iconDown = document.getElementById("sortDownIcon");
var div = document.getElementById("divIcon");
if ( iconUp.style.display == "none" || iconDown.style.display == "none";){
iconUp.style.display == "none";
iconDown.style.display =="block";
} else {
iconUp.style.display == "block";
iconDown.style.display =="none";
}
}

How to get the text value in a div html by clicking on button

I want to get the text between the div tag by clicking on the button event
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">&#8377</span> 7000
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">&#8377</span> 15000
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
I have this type of divs its around three or four I want to detect the value 12000 and the month 6 Months by clicking on this button
How can I achieve that.

Try
$(".price-footer .btn").on( "click", function(event) {
const parent = $(this).parents('.pricing-table');
const priceText = $('.price', parent).text().trim();
const priceParts = priceText.split(' ');
console.log(`priceText: ${priceParts[1]}`);
// Output: "priceText: 12000"
const permonthText = $('.permonth', parent).text().trim();
console.log(`permonthText: ${permonthText}`);
// Output: "permonthText: 6 Months"
});
Demo - https://codepen.io/vyspiansky/pen/MWybEEr

You can add ids to the elements you want to extract the contents of, then you can use document.getElementById(id) to get those elements, and use .innerText to extract the string contents.
Then with a string.replace() you can remove any non-numerical values, and convert the monetary value into a number.
const dollarAmount = parseFloat(document.getElementById("dollar-info").innerText.replace(/[^0-9.]/g, ''))
const month = document.getElementById("month-info").innerText
console.log(dollarAmount)
console.log(month)
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div id="dollar-info" class="price text-primary">
<span class="dollar">&#8377</span>12000.80
</div>
<span id="month-info" class="permonth">6 Months</span>
</div>

Assuming you have many price tables you can loop each table as below example. You can wrap you data in a certain class and get the text value of that class div. Click the button on the to get the value in the example below
$(document).ready(function(){
$('.pricing-table').each(function(){
var $table = $(this);
$table.on('click', '.btn-primary', function(){
var price = $table.find('.price').text().trim();
var permonth = $table.find('.permonth').text().trim();
alert("price is " + price + " for " + permonth);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>

There are so many options to do this. Here is my example with the snippet and code sandbox.
// jquery
const findValues = (target, value) => target.parents().eq(1).find(value);
$(document).on("click", ".btn", (e) => {
const $target = $(e.target);
// dollar is optional
const $dollar = findValues($target, ".dollar");
const $value = findValues($target, ".value");
const $month = findValues($target, ".permonth");
$("#test").text(`${$dollar.text()} ${$value.text()} ${$month.text()}`);
});
// // vanilla js
const test1 = document.querySelector("#test1");
document.querySelectorAll(".btn").forEach((btn) => {
btn.addEventListener("click", ({ target }) => {
const nodes = target.parentNode.parentNode;
const dollar1 = nodes.querySelector(".dollar");
const value1 = nodes.querySelector(".value");
const month1 = nodes.querySelector(".permonth");
test1.innerText = `${dollar1.textContent} ${value1.textContent} ${month1.textContent}`;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">&#8377</span> <span class="value">7000</span>
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> <span class="value">12000</span>
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">&#8377</span> <span class="value">15000</span>
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div id="test"></div>
<div id="test1"></div>
https://codesandbox.io/s/eager-voice-2w640?file=/src/index.js

Using EJS between script tags

I'm new to EJS and I would like some help with creating divs dynamically out of data rendered with EJS on button click.
In my express file:
res.render("user/profile.ejs", { posts: req.user.posts });
//posts is an array with elements having a similar structure to
/*"posts":[
{
"_id":{"$oid":"5cf9072b74cc8310803c89df"},
"type":"Story",
"subject/genre":"somethin",
"content":"another thing",
"date":{"$date":{"$numberLong":"1559824171334"}}
}
]*/
In my ejs file:
<div class="row">
<div class="col">
<div style="float: right">
<button type="button" class="btn btn-dark btn-sm m-1 loadPosts-btn" id="All" style="width: 60px">All</button>
<button type="button" class="btn btn-dark btn-sm m-1 loadPosts-btn" id="Idea" style="width: 60px">Ideas</button>
<button type="button" class="btn btn-dark btn-sm m-1 loadPosts-btn" id="Story" style="width: 60px">Stories</button>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".loadPosts-btn").click(function(){
$(".posts-row").remove();
if($(this).attr("id") === "All"){
<% posts.forEach(elem=>{ %>
document.getElementsByClassName("container")[0].innerHTML +=
`<div class="row posts-row" style="border: 1px solid black">
<div class="col">
<div class="post-container m-4 p-3">
<h2>${elem.type}</h2>
<h4>${elem["subject/genre"]}</h4>
<p>${elem.content}<p>
<small>${elem.date}</small>
</div>
</div>
</div>`
<% }) %>
};
});
$("#All").click();
});
</script>
It shows an error: elem is not defined. which I think is normal because I didn't pass elem to render().
Briefly, what I want is to add a <div class="row"> to every post in the posts array when the button with id="All" is clicked. I don't know if I should do it in <script> tags or under the <div class="row"> without <script> tags.
Thank you in advance.

On one button click event for three pages

I have one page website, with three forms. The first form has class active and the rest are hidden. All forms have buttons with same class .all-pages.
When I click on next button I want the first page to get class hidden, and second get active. When I'm on the second form click on the SAME button NEXT I want the second page to get class hidden, and the third page get active. Please HELP ME :)
And please just JavaScript.
I have 3 forms like this:
<div class="container-fluid"> <!-- first page container -->
<div class="row">
<div class="col-lg-5 col-lg-offset-3">
<form class="well margin-form-top form-color-bg page1">
<div class="row"> <!-- webpage name -->
<div class="col-lg-4 col-lg-offset-4">
<h2>Book a Room</h2>
</div>
</div>
<div class="row"> <!-- information about webpage -->
<div class="col-lg-7 col-lg-offset-2 h4">
<p>This information will let us know more about you.</p>
</div>
</div>
<div class="row"> <!-- navigation -->
<div class="col-lg-12 button-padding-zero">
<ul class="nav nav-pills nav-justified btn-group">
<button type="button" class="btn btn-danger btn-default btn-lg button-width navigation-font-size border-r grey-bg all-pages red active" data-page="0">
<b>ACCOUT</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l-r grey-bg all-pages red" data-page="1">
<b>ROOM TYPE</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l grey-bg all-pages red" data-page="2">
<b>EXTRA DETAILS</b>
</button>
</ul>
</div>
</div>
<br>
<div class="row"> <!-- let's start -->
<div class="col-lg-5 col-lg-offset-4 h4">
<p>Let's start with the basic details.</p>
</div>
</div>
<br>
<div class="row"> <!-- first row email and country -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="email" class="input-sm btn input-width text-left" placeholder="Your Email">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Country</option>
<option>Serbia</option>
<option>Russia</option>
<option>Brazil</option>
</select>
</div>
</div>
<br>
<div class="row"> <!-- 2nd row password and budget -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="password" class="input-sm btn input-width text-left" placeholder="Your Password">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Daily Budget</option>
<option>100$</option>
<option>200$</option>
<option>300$</option>
</select>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-lg-3 col-lg-offset-9">
<button type="button" id="next-button" class="btn btn-default btn-danger btn-lg button-next-width all-pages" data-page="0">NEXT</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
var page3 = document.querySelector('.page3');
var emptyArrey = [];
var nextButtons = document.querySelectorAll('.all-pages');
function nextFunction(event) {
// debugger;
var allButtons = document.querySelectorAll('.all-pages');
for (var i = 0; i < allButtons.length; i++) {
var oneButton = allButtons[i].dataset.page;
if (allButtons[i].dataset.page === '0') {
page1.classList.add('hidden');
page2.classList.remove('hidden');
return;
debugger;
} else {
page2.classList.add('hidden');
page3.classList.remove('hidden');
}
}
}
for (var nextButton of nextButtons){
nextButton.addEventListener('click', nextFunction);
}

You could use the button's attribute data-page to keep track of which form you're currently on, and then show the appropriate form.
// give your button the id "next-button"
var currentPage = document.getElementByID("next-button").getAttribute("data-page");
Once you know what form you're on, then you can hide the others as needed

If I understood your question, here is possible solution.
const nextButtons = document.querySelectorAll('.all-pages');
const pages = document.querySelectorAll('.page');
nextButtons.forEach(btn => {
btn.addEventListener('click', () => {
pages.forEach(page => {
page.hidden = true;
});
const pageActive = document.querySelector(`.page-${btn.dataset.page}`);
pageActive.hidden = false;
})
})
<div class="page page-1">
<button class="all-pages" data-page="2">NEXT 2</button>
</div>
<div class="page page-2" hidden=true>
<button class="all-pages" data-page="3">NEXT 3</button>
</div>
<div class="page page-3" hidden=true>
<button class="all-pages" data-page="1">NEXT 1</button>
</div>

jQuery get text value from elements from different divs with same class

<div class="panel">
<div class="panel-heading item-name">T-shirt1</div>
<div class="panel-body"><img src="img/shirt1.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$15.32</span></h5>
<h4>$17.56</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt2</div>
<div class="panel-body"><img src="img/shirt2.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$21.67</span></h5>
<h4>$23.15</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt3</div>
<div class="panel-body"><img src="img/shirt3.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$16.69</span></h5>
<h4>$16.80</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
What I really want is to retrieve the value of each item-name when I click on the Add to cart button. If I click on the first button, I should get T-shirt1, second button should alert T-shirt2, third button => T-shirt3.
Here is my jQuery script.
<script>
$('.add-to-cart').click(function() {
var itemName = $('.item-name', this).text();
alert(itemName);
});
</script>

You can try this:
$('.add-to-cart').click(function() {
var itemName = $(this).closest('.panel').find('.item-name').text();
alert(itemName);
});
Usage of the closest method: closest

Go from clicked button up in parents chain until you find .panel and then down in children tree until you find .item.name:
$('.add-to-cart').click(function() {
var itemName = $(this).parents('.panel').children('.item-name').first().text();
alert(itemName);
});