We Keep Coding

I want to change html class on hover

Need to change class on hover
to fa-angle-down
$(document).ready(function () {
$('#home i').hover(function () {
$(this).addClass('fas fa-angle-down');
}, function () {
$(this).removeClass('fas fa-angle-up');
});
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Services <i id="angle" class="fas fa-angle-up"></i>
script

When the mouse goes over, you are adding fa-angle-down and when it goes out, you are removing fa-angle-up.
If you want to swap them, you need to add one and remove class each time.
$(document).ready(function () {
$('#home i').hover(function () {
$(this).addClass('fa-angle-down').removeClass('fa-angle-up');
}, function () {
$(this).addClass('fa-angle-up').removeClass('fa-angle-down');
});
});

With pure JavaScript, you can just use the Element.classList property to toggle the classes like this:
var x = document.getElementById("home");
x.addEventListener("mouseover", function(){
this.children[0].classList.add("fa-angle-down");
this.children[0].classList.remove("fa-angle-up");
})
x.addEventListener("mouseout", function(){
this.children[0].classList.add("fa-angle-up");
this.children[0].classList.remove("fa-angle-down");
})
.fa-angle-up:after{content:"up!";}.fa-angle-down:after{content:"down!";}
Services <i id="angle" class="fas fa-angle-up"></i>
N.B. The up and down text is just for demonstrating how the JavaScript works.

Unable to find the specific items value jQuery

I am facing an easy problem but unable to find a solution the problem is
i am creating a dynamic div with some elements also with some data
$("#divSearchedIssue").append(`
<div class="statistic d-flex align-items-center bg-white has-shadow">
<div class="icon bg-red">
<i class="fa fa-tasks"></i>
</div>
<div class="text">
***//want to get this below id value//**
Mobile Code :
<small id="mbCode">
${ data[0].MobileCode }
</small>
***/want to find/**
<br>
Failed From:
<small>
${ data[0].FailedStation }
</small>
<br>
Issues :
<small>
${ data[0].Issues }
</small>
</div>
<div class="text"><strong> </strong></div>
<div class="text">
<button type="button" id="btn" class="btn btn-warning pull-right">Start</button>
</div>
<div class="text"><br></div>
</div>`);
Here I have a button .On this button click i want to fetch the value of
small text which id is #mbCode as mentioned above inside the code
I am trying this by using the following button click code
$(document).on('click', '#btn', function () {
var data = $(this).closest('small').find('#mbCode').val();
alert(data);
});
but its not working.I mean I cant fetch the value of #mbCode on this button click .So help needed
Thanks for helping

Based on .closest()
Description: For each element in the set, get the first element that
matches the selector by testing the element itself and traversing up
through its ancestors in the DOM tree.
As <small> is not an ancestors to button in hierarchy(while traversing-up),
So You need to first go the parent of <small> through .closest() and then try to find <small> html using .find() and .html()
$(document).on('click', '#btn', function () {
var data = $(this).closest('.statistic').find('small').html();
alert(data);
});
Working snippet:-
data = [{'MobileCode':20,'FailedStation':'WATERLOO','Issues':'broken'}];
$("#divSearchedIssue").append('<div class="statistic d-flex align-items- center bg-white has-shadow"><div class="icon bg-red"><i class="fa fa-tasks"></i></div><div class="text">Mobile Code :<small id="mbCode">' + data[0].MobileCode + '</small><br>Failed From: <small> ' + data[0].FailedStation + '</small><br>Issues :<small> '+ data[0].Issues + '</small></div><div class="text"><strong> </strong></div><div class="text"><button type="button" id="btn" class="btn btn-warning pull-right">Start</button></div><div class="text"><br></div></div>');
$(document).on('click', '#btn', function () {
var data = $(this).closest('.statistic').find('small').each(function(){
alert($(this).html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divSearchedIssue"></div>
Note:- .text() will work too
https://jsfiddle.net/tyz4ox50/

As identifiers must be unique, Directly use ID Selector with .text()/.html() method
var data = $('#mbCode').text()
However if you are appending multiple elements I would recommend an alternative to persist Mobile code arbitrary data using custom data-* attribute along with <button> which can be fetched using .data(key) and attach event handler using Class Selector
$("#divSearchedIssue").append('<button type="button" id="btn" class="btn btn-warning pull-right" data-mobilecode="' + data[0].MobileCode + '" >Start</button>');
var counter = 0;
function append() {
$("#divSearchedIssue").append('<button type="button" id="btn" class="btn btn-warning pull-right" data-mobilecode="' + ++counter + '" >Start</button>');
}
append();
append();
append();
$(document).on('click', '.btn', function() {
var data = $(this).data('mobilecode');
console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divSearchedIssue"></div>

Try the following code snippet
var value = $('#mbCode').val();
Make sure the id is unique

Ids shouldn't be duplicate in an web-page.
Also, small is not one of the parent nodes of btns, and use html instead of val.
You need to go two-level higher to statistic Make it
$(document).on('click', '.text #btn', function () {
var data = $(this).closest('.statistic').find('#mbCode');
console.log(data.html());
});
Demo
var counter = 0;
function append() {
$("#divSearchedIssue").append(
`<div class="statistic d-flex align-items-
center bg-white has-shadow">
<div class="icon bg-red"><i class="fa fa-tasks">
</i></div>
<div class="text">
Mobile Code :<small id="mbCode">` +
(counter++) +
`</small><br>Failed From: <small> ' +
data[0].FailedStation + '</small><br>Issues :<small> ' + data[0].Issues +
'</small></div>
<div class="text"><strong> </strong>
</div>
<div class="text"><button type="button" id="btn" class="btn btn-
warning pull-right">Start</button></div>
<div class="text"><br></div>
</div>`
);
}
append();
append();
append();
$(document).on('click', '.text #btn', function () {
var data = $(this).closest('.statistic').find('#mbCode');
console.log(data.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divSearchedIssue"></div>

If your element already has an ID attribute you should be able to find the element by the ID. $("#mbCode")
Your js code
$(this).closest('small').find('#mbCode').val(); // "$(this)", in your code, represents the "button" that was clicked.
is looking for "small" tag inside "button" element, but it's not there. It would work if your button was like
<button type="button" id="btn" class="btn btn-warning pull-right"><small id="mbCode"></small></button>
This should work:
$(document).on('click', '#btn', function () {
var $mbCode = $('#mbCode');
console.log($mbCode);
});

Chevron icon is not going to downward after going up

I'm trying to toggle a chevron-icon, but nothing happen.
$("span:last").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
If I added this code below slidetoggle without if else section, then the icon change to up but not to down again .
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
//starting jquery
<script>
$("#header").ready(function(){
$("#logo").hide();
$("#header").click(function(){
$("#logo").slideToggle("slow");
});
$("#down").click(function() {
var $changeicon= $("down");
if ($changeicon .hasclass("glyphicon-chevron-down")) {
$changeicon.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}
else {
$changeicon.removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
}
});
});
</script>
<body>
<button type ="button" class ="btn btn-success btn-lg" id ="header">
<span class ="glyphicon glyphicon-home pull-left"> <strong>Header</strong> </span><span class ="glyphicon glyphicon-chevron-down pull-right btn-small" id ="down"> </span></button>
<div class ="row">
<div class ="col-lg-12" >
<p id ="logo" style="background-color:#D9D9D9;"> Logo<br/> Skype</p>
</div> </div>
</body>
</html>

Change this:
var $changeicon= $("down");
to this:
var $changeicon= $("#down");
You've just forget a # sign, and there will be nothing in $changeicon.
Update:
You have also a missing: }); to close the header ready section.
So the jQuery should like this:
$(function() {
$("#header").ready(function() {
$("#logo").hide();
$("#header").click(function() {
$("#logo").slideToggle("slow");
});
});
$("#down").click(function() {
var $changeicon = $("#down");
if ($changeicon.hasclass("glyphicon-chevron-down")) {
$changeicon.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}
else {
$changeicon.removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
}
});
});

In order for your code to work you need to change the following:
jquery click selector -> change $("#down").click(function() to $("#header").click(function()
the element with id="down" has no size -> to correct this change var $changeicon= $("down"); to $changeicon= $(this).find("#down");
Capital "C" letter in class -> $changeicon .hasclass("glyphicon-chevron-down") needs to be $changeicon.hasClass("glyphicon-chevron-down")
Check working fiddle here
PS. Learn how to use the browsers' debugger tools ... they're very useful and can save you a lot of time waiting for someone like me to solve your syntax mistakes.

How do I echo the data-type="address"?

im trying to get a javascript onclick to work the plan is when the user clicks a div with the class="store box" it will echo the which is within that div see example:
<div
onclick="javaclick()"
data-type="store"
class="store box"
data-latitude="53.7658344"
data-longitude="-2.6646485">
<p>
<span class="title" data-type="title">Store38</span>,<br>
<span data-type="address"><i class="fa fa-map-marker"></i> 123 Barrington Road, Barrington, BR1 2JH</span>,<br>
<span data-type="phone"><i class="fa fa-phone"></i> 00000 000000</span><br>
<span data-type="openingtimes"><i class="fa fa-clock-o"></i> Opening Times: <?php include('store-hours.php'); ?></span>
<br>
<span data-type="directions" class="directions">
<label data-type="directions-label">Get directions</label>
<input data-type="directions-input" type="text" class="hidden" />
</span>
</p>
so when the user clicks the div in this case store38, it will write the address from data-type address in the div footer_box.
<div id="footer_box">
<script type="text/javascript">
function javaclick(){
document.write("data-type='address'");
}
</script>
</div>
and it would do it for each of the stores i have 50 in total. any ideas?

Best way to outputting data from JS is to write it into some div.
<div id="Output"> </div>
jQuery function
$("#output").text("works");
Or pure JS solution
document.getElementById("output").innerHtml = "works";
To get that data you will need jquerys .data() or .attr() function:
var data = $(element).data("type");
Or:
var data = $(element).attr("data-type");
To handle it in function, you must transfer element variable.
function javaclick(element) {
}
And bind event:
$(".store").bind("click", function(event){
/* code */
});
Now just assemble that, and you have got solution.
$('.store.box').click(function() {
var data = $(this).data("type");
$('#footer_box').text(data);
});

With jquery, you can do something like this:
$(".store").click(function(){
address = $(this).find('[data-type=address]').text();
$("#footer_box").html(address);
});
Demo Fiddle here

Instead of invoking some javascript from HTML, contain that logic in your JS instead. Example:
(function() {
var footerBox = document.querySelector('footer_box');
[].forEach.call(document.querySelectorAll('.store.box'), function(el){
el.addEventListener('click', function(e) {
footerBox.innerHTML = e.target.dataset.type;
}, false);
});
})();

How to add repetitive div with jQuery?

When I click on the new button with jQuery it adds the div, but it only adds one. When I check from DevTools it constantly creates the same place. But I want it to add another one after that. Can you help me?
HTML code
<div class="text-left" style="margin-bottom: 15px;">
<button type="button" class="add-extra-email-button btn btn-success" disabled><i class="fas fa-plus"></i></button>
</div>
<div class="clone"></div>
Here are the sample js codes
$('.add-extra-email-button').click(function() {
var element = $('.clone');
element.html(
'<div class="clone_edilen_email">' +
'<li>' +
'<a href="javascript:;"> Test' +
'<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>' +
'</a>' +
'</li>' +
'</div>'
);
$('.clone_edilen_email').addClass('single-email remove-email');
$('.single-email').append('<div class="btn-delete-branch-email"><button class="remove-field-email btn btn-danger"><i class="fas fa-trash"></i></button></div>');
$('.clone_edilen_email > .single-email').attr("class", "remove-email");
});
$(document).on('click', '.remove-field-email', function(e) {
$(this).parent('.btn-delete-branch-email').parent('.remove-email').remove();
e.preventDefault();
});

If I understand correctly, you want to add the <div class="clone_edilen_email"> again and again, as soon somebody clicks on the .add-extra-email-button button.
In general, calling element.html('<some_wild_html></some_wild_html>') will always override the full inner content of element with <some_wild_html></some_wild_html>. Also, if the element already contains some other sub-elements, they will got lost. In your given code example, I assume, your intention was to extend the element's html and not replace it.
Here is my suggestion:
$('.add-extra-email-button').click(function() {
var newDiv = $('<div class="clone_edilen_mail"></div>');
newDiv.html('<li><a href="javascript:;"> Test<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i></li>');
$('.clone').append(newDiv); // This is the important clue here!
// afterwards you may insert your residual class stuff
// $('.clone_edilen_email').addClass('single-email remove-email'); <- I would suggest you add these classes already at the begining, where I set the variable "newDiv"
// ...
// $('.single-email').append('<div class="btn-delete-branch-email"><button class="remove-field-email btn btn-danger"><i class="fas fa-trash"></i></button></div>');
// $('.clone_edilen_email > .single-email').attr("class", "remove-email");
});
// .. your other code may follow here ...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clone">I am a clone-div!</div>
<button class="add-extra-email-button">Click Me!</button>
Hope that this might help you!

Try This Method, Append Duplicate Elements and Contents Using jQuery .clone() Method
<!doctype html>
<html>
<head>
<title>jQuery Clone() – Add Elements and its Contents</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
div {
margin:3px;
padding:3px;
border:solid 1px #999;
width:300px;
}
</style>
</head>
<body>
<p>Click the button to clone (make a duplicate) of the DIV element!</p>
<div id="Container">Hello, how was your day!</div>
<p><input type="button" id="Button1" value="Clone it" /></p>
</body>
<script>
$(document).ready(function () {
$('#Button1').on('click', function () {
$('#Container')
.clone()
.appendTo("body");
});
});
</script>
</html>

In your first click function you replace all the content of your div clone so even if you click again you are going to have only one. He is just replacing the old one.
I didn't get what you are trying to do with the second click function.