We Keep Coding

Star Rating mouse click when hovering over stars

I'm trying to have a mouse icon show up when I hover over the stars in this script using Bootstrap 4.
This is the form.
<div class="form-group">
<h4>Rate this product</h4>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<i class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
<input type="hidden" class="form-control" id="rating" name="rating" value="1">
<input type="hidden" class="form-control" id="product_id" name="product_id" value="<?php echo $_GET['id']; ?>">
<input type="hidden" name="action" value="saveRating">
</div>
And here is the Javascript
$( ".rateButton" ).click(function() {
if($(this).hasClass('star-grey')) {
$(this).removeClass('star-grey').addClass('star-highlight star-selected');
$(this).prevAll('.rateButton').removeClass('star-grey').addClass('star-highlight star-selected');
$(this).nextAll('.rateButton').removeClass('star-highlight star-selected').addClass('star-grey');
} else {
$(this).nextAll('.rateButton').removeClass('star-highlight star-selected').addClass('star-grey');
}
$("#rating").val($('.star-selected').length); //count the num of star selected
});
This is how I want it to look https://imgur.com/a/sTkSQR2

I'm trying to have a mouse icon show up when I hover over the stars in
this script using Bootstrap 4
Showing mouse cursor to look like pointed hand (as in image) can be done using below css.
.rateButton {
cursor: pointer
}
Bootstrap way of doing it
Add role="button", then a cursor turns to hand. Bootstrap reference
Reboot includes an enhancement for role="button" to change the default
cursor to pointer. Add this attribute to elements to help indicate
elements are interactive. This role isn’t necessary for
elements, which get their own cursor change.
Your code will look like
<i role="button" class="fa fa-star fa-lg star-grey rateButton" aria-hidden="true"></i>
Example
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<i role="button"> I am an i tag, hovering me should change the cursor to a hand</i>
<br />
<br />
<i> I am an i tag, but I dont have role="button" hovering me WILL NOT change cursor to a hand</i>
I prefer the first method if you don't want to edit the html

How to target a Font Awesome 5 svg icon in JavaScript?

It renders after the page loads but I have no idea how I can target that. It's wrapped in an anchor tag and I tried to set the z-index of that anchor tag to like 9999 so it's goes above the icon and I can target that but it's not working either.
<nav class="menu">
<div class="icon-list">
<a class="highlight" href="#szolgáltatásaim"><i class="far fa-bell"></i><span>Szolgáltatásaim</span></a>
<a class="highlight" href="#rólam"><i class="far fa-user"></i><span>Rólam</span></a>
<a class="highlight" href="#munkáim"
><i class="far fa-folder-open"></i><span>Munkáim</span></a>
<a class="highlight" href="#oktatás">
<i class="fas fa-chalkboard"></i><span>Oktatás</span></a>
<a class="highlight" href="#árak"
><i class="far fa-bookmark"></i><span>Árak</span></a >
<a class="highlight" href="#marketing"
><i class="far fa-lightbulb"></i><span>Marketing</span></a>
<a class="highlight" href="#üzenet"
><i class="far fa-envelope"></i><span>Üzenet</span></a>
</div>
</nav>

I think your question needs more details so we can help you better. That being said, if you're trying to target multiple elements use class. If you're trying to target one specific element use ID. For this to work you'll need to add such properties to your <i> icons in your html code. Here's an example snippet. Is this what you need?
function changeAll() {
var elements = document.querySelectorAll('.far,.fas'); // To target multiple elements use class
for(var i = 0; i < elements.length; i++){
elements[i].style.color = "red";
}
}
function changeBell() {
document.getElementById("bell").style.color = "green"; // To target one specific element use ID
}
<script async src="https://kit.fontawesome.com/0f49cf42f1.js" crossorigin="anonymous"></script>
<nav class="menu">
<div class="icon-list">
<a class="highlight" href="#szolgáltatásaim"><i class="far fa-bell" id="bell"></i><span>Szolgáltatásaim</span></a>
<a class="highlight" href="#rólam"><i class="far fa-user"></i><span>Rólam</span></a>
<a class="highlight" href="#munkáim"><i class="far fa-folder-open"></i><span>Munkáim</span></a>
<a class="highlight" href="#oktatás">
<i class="fas fa-chalkboard"></i><span>Oktatás</span></a>
<a class="highlight" href="#árak"><i class="far fa-bookmark"></i><span>Árak</span></a >
<a class="highlight" href="#marketing"
><i class="far fa-lightbulb"></i><span>Marketing</span></a>
<a class="highlight" href="#üzenet"><i class="far fa-envelope"></i><span>Üzenet</span></a>
</div>
</nav>
<br>
<button type="button" onclick="changeAll()">Change color of all icons</button>
<br>
<button type="button" onclick="changeBell()">Change color of bell only</button>

open div on click of image

I have a very simple module to develop. On click of an image I need to open up a div element that I have created.I have attached my HTML and javascript file.When I am loading the page the div wont be coming because I have given style="display:none
myfunction() {
document.getElementById('Chatbot').style.visibility = "visible";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
<img src="sticky.png" style="width:50px;height:50px">
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>

document.getElementById('Chatbot').style.display = "block";
function myfunction() {
document.getElementById('Chatbot').style.display = "block";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
Some Image
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>

Avoid using inline scripts and also avoid capitalising the first letter of your ID or class name.
Just add an event listener to your #chat anchor link that loads a function which sets the css display property of your div to block on click like this:
/* JavaScript */
var chat = document.getElementById("chat");
var div = document.getElementById('chatbot');
function showDiv(){
div.style.display = "block";
}
chat.addEventListener("click", showDiv);
/* CSS */
a {text-decoration: none; padding: 5px; background-color: green; color: white;}
#chatbot {display: none;}
<!-- HTML -->
<a type="button" href="#Chatbot" id="chat">Open Div</a>
<hr>
<div id="chatbot">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>

It can be a simple way
<script>
$( document ).ready(function() {
$('#chat').click( function(){
if ( $('#Chatbot').hasClass('active') ) {
$('#Chatbot').removeClass('active');
} else {
$('#Chatbot').addClass('active');
}
});
});
</script>
Add lil css
<style>
.active {
display:block!important;
}
</style>
Your HTML
<body>
<div id="chat">
Some Image
</div>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>

Change color of font-awesome star icon

I have a font-awesome star-o icon and onclick I want to set its color to yellow. Can some one help me?
<div id="favourite_star">
<span class="fa-stack fa-lg left">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-fw fa-lg fa-star-o fa-stack-1x favourite_icon" onclick="setLocally()"></i></span>
</div>
I just want the color inside the star to be set yellow. I tried to set it using jquery the color to yellow but it sets only the edges of star to yellow and then I tried with the background-color to yellow then its sets the whole square to yellow.

You have to change the star class in .star instead of .star-o
So
// HTML
<i class="fa fa-fw fa-lg fa-star-o fa-stack-1x favourite_icon"></i>
// JS
$(".favourite_icon").click(function(){
$(this).css({"color": "yellow"}).removeClass('fa-star-o').addClass('fa-star');
});

Try this:-
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-star" style="font-size:48px;color:yellow"></i>
<br>
</body>
</html>
Or try this
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<h1>fa fa-star</h1>
<i class="fa fa-star"></i>
<i class="fa fa-star" style="font-size:24px"></i>
<i class="fa fa-star" style="font-size:36px"></i>
<i class="fa fa-star" style="font-size:48px;color:yellow"></i>
<br>
<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-star"></i></button>
<p>Unicode:</p>
<i style="font-size:24px" class="fa"></i>
</body>
</html>

How can I create a marking an answer as accepted one system?

Explanation: I'm trying to make an accepted-answer system and there are three cases:
marking a new answer as accepted one (there is no accepted answer already)
undo a accepted answer
switching from one answer to another one
Here is my code:
$("body").on('click', '.fa-check', function(e) {
// send a request by ajax and if it is successful then
if( this.attr('color') == '#44b449' ){ // undo
this.css({"color":"#aaa"}); // set gry color to marked icon
} else { // switchin or marking a new one
$('.fa-check').css({"color":"#aaa"}); // set gray color to all icons
this.css({"color":"#44b449"}); // set green color to marked icon
}
});
.fa-check{
color:#aaa;
cursor: pointer;
}
.fa-check:hover{
color: #999;
}
<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
<hr>
<p>answer2</p>
<i class="fa fa-check" aria-hidden="true" style="color: #44b449;"></i>
<hr>
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>
But as you see my code doesn't work. How can I fix it?
Note: The whole of my question is about coloring.

Firstly your code is throwing errors as you're calling jQuery methods on this when it refers to a DOMElement, not a jQuery object.
To fix your issues you can simplify your logic by using classes instead of applying inline CSS styling. This allows you to simply toggle the class on click of the .fa-check element. Try this:
$("body").on('click', '.fa-check', function(e) {
// send a request by ajax and if it is successful then
$('.fa-check').not(this).removeClass('checked');
$(this).toggleClass('checked');
});
.fa-check {
color: #aaa;
cursor: pointer;
}
.fa-check.checked {
color: #44b449;
}
<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
<hr>
<p>answer2</p>
<i class="fa fa-check checked" aria-hidden="true"></i>
<hr>
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>

Use this method
function click_div(div) {
$("#main_div div .fa-check").css("color"," #aaa");
$("#"+div+" .fa-check").css("color"," #44b449");
}
#div_1,#div_2,#div_3
{
width:100%;
height:100px;
}
.fa-check{
color:#aaa;
cursor: pointer;
}
.fa-check:hover{
color: #999;
}
<html>
<head>
<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div id="main_div">
<div id="div1" onclick="click_div('div1')">
<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
<hr>
<div id="div2" onclick="click_div('div2')">
<p>answer2</p>
<i class="fa fa-check" aria-hidden="true" style="color: #44b449;"></i>
</div>
<hr>
<div id="div3" onclick="click_div('div3')">
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
</div>
</html>