Develop Reference

How to target an id inside of a div class when I hover a different parent div class with jquery?

So as the question says, I am trying to hover the class button1 and get the id of 'css'. With my current code, all I get is the id html. I need to get a unique id that's pertinent to which button I hover. I'm still newer to jquery and javascript in general but I can't seem to find any information on this topic so any reference source would be great too if possible.
Here's my code:
HTML
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
Jquery
('.button1').mouseover(function(event) {
$(".text").attr('id');
})

With your current code you get nothing, since .text does not have ID and result is never used. Use $(this).find('.Score').attr('id')[1].
Note few bug fixes:
('.button1').mouseover is missing $
You have nested .button1 (first one is not properly closed, use proper indentation for easier debugging), so it's impossible to find singe element, because you hover on top most element
$('.button1').mouseover(function(event) {
console.log($(this).find('.Score').attr('id'))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>

Click smiley and place in input field

How can I click on a smiley / emoji from a list and place it in a input field? I can see in the Inspect Element Q (console log) that it is being clicked but I can not find a way to copy it to the input field.
HTML
<div id="wrapper">
<div class="bubble-container" ></div>
</div>
<div class="emoji" onclick="javascript:smileySelect(event);">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes"> 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
JAVASCRIPT
function smileySelect(event) {
// get selected item and place it in input field
};

You can get the clicked emoticon with event.target and add the textContent of that to the value of the input element.
I also added a check event.target != event.currentTarget to avoid all icons are inserted when you click on the parent but not on a child (emoticon). When your html content of the event handler gets more complicated then you probably want to add a class to all emoticon spans and check if the clicked element has that class.
function smileySelect(event) {
/*
event.target = the actually clicked element
event.currentTarget = the element that has the event handler
When they are not equal we know the click was on a child of the .emoji element.
Any child is valid since you only have the emoticon span elements inside the .emoji element.
*/
if (event.target != event.currentTarget) {
let smiley = event.target;
document.querySelector('#text').value += smiley.textContent;
}
};
<div id="wrapper">
<div class="bubble-container"></div>
</div>
<div class="emoji" onclick="javascript:smileySelect(event);">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes"> 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>

You can try something like:-
<div id="wrapper">
<div class="bubble-container" ></div>
</div>
<div class="emoji" onclick="smileySelect(event.target.innerHTML)">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes" > 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
JAVASCRIPT
function smileySelect(emoji) {
if (emoji.includes("span") == false)
document.getElementById("text").value += emoji;
};

jquery selector not working on a dynamic value

For some reason my jQuery function is not working on a dynamic value.
I'm trying to show/hide content ("item-content") when the user clicks on the span "Click here".
If I use not nested HTML, everything works fine, but for some reason, my function breaks when I use nested HTML.
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next('.main .child span.item-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>

.next looks for the next sibling, so in your code you don't need to specify the class of what you're looking for as you're just getting the span sibling, which is .item-content.
Working example:
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>

The selector you are toggling is incorrect, as it is looking for a span called 'item-content'. It should be:
$(this).next('.main .child div.item-content').toggle();

First of all make sure that the jQuery cdn library is initiated before the custom script on your page.
There are two ways to hide components by css and jquery both. I'm posting the css script too and it's better to hide using css.
Also there is no need for specifying the classes from top inside the click event for toggle, the next() function basically lookup for the next html component.
$('.item-content').hide(); // if using css to hide than this line is not required
$(document).on('click', '.item-title', function(){
$(this).next().toggle();
});
.item-content {
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>

How to hide a parent div which has nested div inside

HTML:
<div class="btn-small blue">
<span class="label bottom">Vascular Surgery</span>
</div>
<div class="btn-small red">
<span class="label bottom">Administrator</span>
</div>
<div class="btn-small blue">
<span class="label bottom">Cardiology North</span>
</div>
<div class="calContent">
<div class="divContent">
<div class="divContentHolder">
<div>
VASCULAR CURGERY
</div>
<div>
CALENDAR GOES HERE
</div>
</div>
</div>
<div class="divContent">
This is Second
</div>
<div class="divContent">
This is Third
</div>
</div>
Fiddle: https://jsfiddle.net/geetof8x/
If I remove the following code:
<div class="divContent">
<div class="divContentHolder">
<div>
VASCULAR CURGERY
</div>
<div>
CALENDAR GOES HERE
</div>
</div>
</div>
With:
<div class="divContent">
This is First
</div>
The script works fine but with the added extra div inside the divContent div, the code doesn't work correctly.
The removed code will be used in the final template. How can I edit the javascript so it can handle either case scenario.

You're only interested in the children (not grandchildren, etc.) of .calContent.
One solution is to use the child selector to limit your selection to only the direct children:
$('.calContent > div:eq(' + $(this).index() + ')').fadeOut();
Updated Fiddle

Get parent div text having a specific class jquery

I have a link on click of that i want to get the parent div text having a specific class.How can we do this in jquery
HTML
<div class="rcmp_li lft">
<div class="rcm">
<div class="cmplogowrap clr cmp">
<a class="reclogo lft" href="#"></a>
<a class="lft cmp" href="#">
<div class="tpjobwrap">
<div class="compName font_15">ABC </div>
<div class="tpjob_desc">Construction</div>
<div class="tpjob_desc">Mumbai</div>
</div>
</a>
</div>
<a class="lnk cmpjobs" href="#"> Active </a>
</div>
<div class="cmpfollow_wrap clr">
<div class="followbtnwrap rgt">
<a onclick="abc(this)" href="javascript:void(0)">Test</a>
</div>
<div id="my_follow61" class="followcnt rgt">6 </div>
</div>
</div>
On Click of abc() i want to get the value of diva having class compName
i Have tried this
$(obj).parents('div[class^="compName"]').html()
But this is not working

You have incorrect selector to target element. you need to use:
$(obj).closest('.rcmp_li').find('.compName').html()
Working Demo

Try including :has() selector at parameter passed to .parents() to return div element having child element .compName
function abc(obj) {
console.log($(obj).parents(":has(.compName)").find(".compName").html())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="rcmp_li lft">
<div class="rcm">
<div class="cmplogowrap clr cmp">
<a class="reclogo lft" href="#"></a>
<a class="lft cmp" href="#">
<div class="tpjobwrap">
<div class="compName font_15">ABC </div>
<div class="tpjob_desc">Construction</div>
<div class="tpjob_desc">Mumbai</div>
</div>
</a>
</div>
<a class="lnk cmpjobs" href="#"> Active </a>
</div>
<div class="cmpfollow_wrap clr">
<div class="followbtnwrap rgt">
<a onclick="abc(this)" href="javascript:void(0)">Test</a>
</div>
<div id="my_follow61" class="followcnt rgt">6 </div>
</div>
</div>

Your code will not work because its parent is not the div you are looking for.
$(obj).parents('div[class^="compName"]').html();
Also you cannot use "parents" And to travel to parent hierarchy you will have to use parent().parent() where you need to know the exact parent level.
Here you can simply use $("div.compName").html();