We Keep Coding

click event is not working. For few elements it is for few its not

In my code for cmd and normal its working, but for #aboutme its not. Don't know why such event is getting ignored while its working for the above snippet.
var normal = $(".normal");
var cmd = $(".cmd");
normal.on("click", function(){
$(".UI").show();
$(".console").hide();
});
cmd.on("click", function(){
$(".console").show();
$(".UI").hide();
});
$("#aboutme").on("click",function(){
console.log("okay");
});
My Html Code: class dashboard acts as a wrapper.
<div class="dashboard ">
<div class="option">
<div class="normal">Normal</div>
<div class="cmd">Terminal</div>
</div>
<hr style="background-color: white;">
<div class="console">
</div>
<div class="UI ">
<div class="showcase">
<div id="aboutme">
<h2><span>»About</span></h2>
<p>Self-motivated fresher seeking a career in recognized organization to prove my skills and utilize my knowledge and intelligence in the growth of organization.</p>
</div>
<div id="Skills">
<h2><span>Skills</span></h2>
<p> <kbd>Programming Languages</kbd> : Python, Node.js, C++</p>
<p> <kbd>Platform & Development Tools</kbd> : VS Code , Spyder and Jupiter Notebook</p>
</div>
</div>
</div>

Seems to work, can you provide your full HTML
$("#aboutme").on("click",function(){
console.log("okay");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="aboutme">Test</button>

Assigning class to a central block

I have a problem. I use uikit, slider. Output 3 elements on the screen, when the slide changes, the class of visible elements (uk-active) also changes. I need to select the central element (css nth-child dont work) from the active. Can someone tell me how to do it correctly? Maybe set class. Code:
<div id="services-slider" uk-slider>
<ul class="uk-slider-items uk-child-width-1-1 uk-child-width-1-3#s uk-child-width-1-3#m">
<li>
<div class="services-box">
<strong>Title1</strong>
<p>Some text.</p>
</div>
</li>
<li>
<div class="services-box">
<strong>Title2</strong>
<p>Some text.</p>
</div>
</li>
<li>
<div class="services-box">
<strong>Title3</strong>
<p>Some text.</p>
</div>
</li>
<li>
<div class="services-box">
<strong>Title4</strong>
<p>Some text.</p>
</div>
</li>
<li>
<div class="services-box">
<strong>Title5</strong>
<p>Some text.</p>
</div>
</li>
</ul>
<div class="navigate">
<button uk-slider-item="0">01</button>
<button uk-slider-item="1">02</button>
<button uk-slider-item="2">03</button>
<button uk-slider-item="3">04</button>
<button uk-slider-item="4">05</button>
</div>
</div>
Link on Codepen

Try the JavaScript events provided in the documentation: https://getuikit.com/docs/slider#javascript
I was able to get the middle element using the functions provided in the documentation. Simple example of the same:
https://codepen.io/anon/pen/KBMvqP#anon-signup
UIkit.util.on('#services-slider', 'itemshown', function () {
active_slides = document.getElementsByClassName("uk-active");
active_slides[1].appendChild(document.createTextNode("bar"));
});
It's not too fancy but I hope you get what I am doing here and can modify you code accordingly.

var centralActive;
$('.navigate :button').click(function() {
var targetNum = parseInt($(this).attr('uk-slider-item')) + 1;
centralActive = $('.services-box')[targetNum]
})
Codepen demo

Looping through ul li and using insertBefore to move image up two elements

I am learning js and jquery and have been trying to solve this litle issue I am having when trying to loop through a ul on the page and move a dom element specifically an image up two levels in my html. Here is what the html looks like:
<ul class="feedEkList">
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="imageurl.jpg" class="wp-post-image">
<p>Post Description.</p>
</div>
</div>
</li>
</ul>
There are 10 li items in my ul but for readability purpose I only included one so you can see my html structure.
My javascript seems to be adding all the images before every featured-title div giving me piles of pictures instead of the one that is associated with that li.
$(function() {
$('.wp-post-image').insertBefore($('.featured-title'));
});
So then I tried this using each but it does not seem to do anything.
$(function() {
$('.feedEkList > li > .featured-title > .post-excerpt > .wp-post-image').each(function() {
$('.wp-post-image').insertBefore($('.featured-title'));
});
});
I was thinking maybe i need to use "this" in the code somewhere but I am new to javascript and not sure how to properly use "this" with the insert before, or if "this" is even the best option.
$('this.wp-post-image').insertBefore($('this.featured-title'));
Can anyone help me figure out what I am doing wrong? It is driving me nuts!

You need to iterate each image
For each image, get his parent .slick-slide.
Prepend the image to the .slick-slide using .prepend
Optional: If you need to insertBefore .featured-title see the comment.
$('.wp-post-image').each(function() {
var $this = $(this),
parentLi = $this.parents('.slick-slide').first();
$this.prependTo(parentLi);
//$this.insertBefore(parentLi.find('.featured-title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="feedEkList">
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" class="wp-post-image" />
<p>Post Description.</p>
</div>
</div>
</li>
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" class="wp-post-image" />
<p>Post Description.</p>
</div>
</div>
</li>
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
removed the "wp-post-image" class to show how it was look before
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" />
<p>Post Description.</p>
</div>
</div>
</li>
</ul>

My js pagination code is not working, completely lost as to what is causing it

I have a pagination set up that I have used many time before... works great for lists and simple paragraphs, but I am unable to get it to work with a more complex html code, which is listed below. For some reason, the js refuses to turn the below code into a set object in order to paginate.
<div class="properties-content">
<div id="paging_container8" class="container">
<div class="storybody">
<p>
<!---------- Property Start ---------->
<article class="hentry">
<div class="property-featured"> <a class="content-thumb" href="property-details.html"> <img src="images/property/property3.jpg" alt=""> </a> <span class="property-label last">Last one left</span> <span class="property-category">Single Family Home </span> </div>
<div class="property-wrap">
<h2 class="property-title"> Single Family Residential, NJ </h2>
<div class="property-excerpt">
<p>Classic 60's ranch living. House has hardwood floors and hard coat plaster walls and ceilings...</p>
<p class="property-fullwidth-excerpt">Classic 60's ranch living. House has hardwood floors and hard coat plaster walls and ceilings in good condition. Intimate backyard for private gatherings. Full basement...</p>
</div>
<div class="property-summary">
<div class="property-detail">
<div class="size"> <span>1118 sqft</span> </div>
<div class="bathrooms"> <span>2</span> </div>
<div class="bedrooms"> <span>3</span> </div>
</div>
<div class="property-info">
<div class="property-price"> <span> <span class="amount">$299,000</span> </span> </div>
<div class="property-action"> More Details </div>
</div>
<div class="property-info property-fullwidth-info">
<div class="property-price"> <span><span class="amount">$299,000</span> </span> </div>
<div class="size"><span>1118 sqft</span> </div>
<div class="bathrooms"><span>2</span> </div>
<div class="bedrooms"><span>3</span> </div>
</div>
</div>
</div>
<div class="property-action property-fullwidth-action"> More Details </div>
</article>
<!---------- Property End ---------->
<!---------- Property End ---------->
</p>
<div class="page_navigation"></div>
I need, due to how my css is, to show 2 of the above code snippet out of maybe 25. And here is my javascript that I am using:
<script>
var str= $(".storybody").html();
var substr=str.split( "<!--pagebreak-->" );
var txt="<ul class='storycontent'><li>";
var x=0;
for (x in substr)
{
if(x==0){
txt=txt+substr[x];
}
else{
txt=txt+"</li><li>"+substr[x];
}
}
var paginated=txt+"</li></ul>";
$('div.storybody').replaceWith(paginated);
$(document).ready(function(){
$('#paging_container8').pajinate({
num_page_links_to_display : 2,
items_per_page : 1 ,
item_container_id : '.storycontent'
});
});
​</script>
And here is the jsfiddle: http://jsfiddle.net/moLwmyyr/1/

I have figured it out!
The following js, along with the js in the fiddle, work with my html code in my question. Instead of the original js which only worked for simple lists, tables, and paragraphs, the js listed here will work on nested html code.
(function($){
$(document).ready(function(){
$(".pagination").customPaginate({
itemsToPaginate : ".post"
});
});
})(jQuery)
http://jsfiddle.net/moLwmyyr/2/
Works perfectly with my site and css. Hope this helps others.

I want the station name to be changed when user clicks play button

I have the fiddle all ready to go I just need help with the jquery/javascript part. What I want is to have the record name/station title change when the user clicks on the play button they find on hovering over the album cover. I also want the record/vinyl in the "player" box to start spinning. Right now it spins on hover but I want to change that.
Here is the fiddle http://jsfiddle.net/7txt3/1/
and here is just the html code because the css is kinda long!
<div class="grid_12">
<div class="grid_6 alpha"><!-- record, overflow:hidden -->
<div id="player">
<div id="recordbox">
<div class="record2">
</div>
</div>
<div class="bars-box">
<div class="player-box">
<div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
</div>
</div>
</div>
</div>
<div class="grid_3">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
<a class="play" href="#">Play</a>
</div>
<div class="salad"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
</div>
</div>
<div class="grid_3 omega">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">Sensuous and mellow vocals, mostly female, with an electronic influence.</p>
<a class="play" href="#">Play</a>
</div>
<div class="lush"><!-- sleeve -->
<h3>Lush</h3>
</div>
</div>
</div>

Something like this?
$(function(){
var station = $('.player-station');
$('.play').click(function(){
station.text($(this).closest('.album').find('h3').text());
});
});
Demo: http://jsfiddle.net/7txt3/3/
For spinning you can use: http://code.google.com/p/jqueryrotate/

So, first thing is first... you need to read up on the use of an ID versus the use of a Class. To put it a bit simply:
ID = Unique identifier for an element
Class = Identifier for a series of elements
The reason I bring this up is because you have odd naming conventions like class="lush" which don't make sense. That should be an id, and the class should be something like "sleeve".
Anyway, here's the updated code and fiddle. Yes, you can make it a bit more condensed (not set a var for the title), but I wanted to spread it out so you could see the code a little better. If you have questions, let me know.
$('a.play').click(function() {
var title = $(this).closest('.album').find('.album-title');
$('span.player-station').text($(title).text());
});​
I also added a class to the h3 tags, just so you didn't run into any issues down the road:
<h3 class="album-title">Lush</h3>
Here's the fiddle:
http://jsfiddle.net/7txt3/4/