Develop Reference

Jquery put elements in div

You need to put items in a div - <div style = 'flex-direction: column;'>.
Div needs to be created after p withid = "billing_city_field"
and closes after the p withid = "apartment_field".
Tried to do it with this function:
jQuery (document) .ready (function ($) {
$ ("# billing_city_field"). after ("<div style = 'flex-direction: column;'>");
$ ("# apartment_field"). after ("</ div");
});
But the div immediately closes. What should I do?

The issue is because you cannot append start/end tags separately. The DOM works with elements as a whole, so you need to create the entire div element in a single operation.
Given the description of your goal it looks like you're trying to wrap the existing content in a new div. As such you can use nextUntil() (assuming the target elements are siblings) and then wrapAll(). Try this:
jQuery($ => {
let $contents = $("#billing_city_field").nextUntil('#apartment_field').add('#apartment_field');
$contents.wrapAll('<div class="column" />');
});
Note the use of a class attribute in the above example, instead of applying inline style rules.

Question is not super clear but from what I can tell.
I think you have small misunderstanding what .after does with jQuery. After in this case is "structural" and not "time" related. If you check jQuery docs (https://api.jquery.com/after/) for this you can see basically what you need to do.
Simplest way to do this, if these things needs to created and don't exist already on body for example.
$(function(){
var p = $("<p id='apartment_field'>Paragraph test</p>");
$("body").append("<div id='billing_city_field' style='flex-direction: column;'></div>");
$("#billing_city_field").html(p);
});
I've added Paragraph test so result is visible easier.
And one more thing, not sure if it's error with copy/paste but make sure that # and id don't have space in-between like this.
$("#billing_city_field")
$("#apartment_field")
Edit: Looking at the comments maybe something like this, if they exist already? You should clarify the question more.
$("#billing_city_field").append($("#apartment_field").detach());

Add class to dynamically changing element

I'm trying to use the attrchange plugin to listen to a change in one element and add a class to another element. Kind of novice to jquery and javascript and could use some help with this...
function navchange() {
document.getElementByClassName("sticky-element-cloned").addClass('shrinkwrap');
}
$(".sticky-element-original").attrchange({
trackValues: true,
callback: function (event) {
//event.attributeName - Attribute Name
//event.oldValue - Prev Value
//event.newValue - New Value
navchange();
}
});
Thanks for any insight.

Two things. Firstly, fix your DOM method to make it valid.
document.getElementsByClassName(".sticky-element-cloned")[0].classList.add("shrinkwrap");
Secondly - isn't the class sticky-element-cloned? Then why are you using sticky-element-original in your jQuery?
$(".sticky-element-cloned").attrChange({...});
Or (do one or the other, not both)
Change it in your JavaScript:
document.getElementsByClassName(".sticky-element-original")[0].classList.add("shrinkwrap");

On the navchange function you're mixing your pure Javascript with your jQuery. Try:
$(".sticky-element-cloned").addClass("shrinkwrap");

find siblings and addclass using javascript only

I want to add class on siblings of target Element in javascript. I have done this before using jquery which is pretty easy. But In my current organization they do not use jquery and I need to done with javascript and that is very difficult for me.
I have write some code that will attached a click function to an matched element but afterward I am not getting any login to how to make it happend. fiddle
var elements= document.getElementsByTagName('*'),i;
i=0;
while(elements[i]){
if(elements[i].className=='c'){
elements[i].addEventListener('click',function(){
this.jsSiblings().jsAddClass('newClass')
})
}
i++
}
Array.prototype.jsSiblings= function(){
//code
}
Array.prototype.jsAddClass=function(){
//code
}

You can use the base function in JS to add a class, element.classList.add("anotherclass"); (from MDN) and here you will find out about siblings without jQuery : How to find all Siblings of currently selected object

Select a div insinde another div with jQuery

So I try to select a div within another div. My html goes like this:
<div id="Stage_game_page1"><div id="cube0">[...]</div><div id="cube1">[...]</div></div>
I want to select my #cube0 within my Stage_game_page specifically, with jQuery or JS.
The goal of the selection is to use it in an loop.
I tried :
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#Stage_game_page")$("#cube"+i)[...]
}
I don't understand what I'm doing wrong.

var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#cube"+i);
}
This is sufficient to select the "#cube0"/"#cube1"/"#cube2" etc. especially since ids are always unique. To answer the question $("#cube0", "#Stage_game_page")... that is how you select a div in another div

The id attribute should only be used once! I see above that you're using id="cube0" twice. If you want your divs to be recognized in multiple instances, use a class instead (the . instead of the #). Using the same id twice will probably break your script.
I believe for your html, you could use id "cube0", "cube1", etc., as long as you're ok with entering them manually. That should work for the loop you'd like to use.

Loops through each div that starts with the id cube inside Stage_game_page1
$("#Stage_game_page1 > div[id^='cube']").each(function () {
alert($(this).html());
});
JSFiddle
Child Selctor
Starts with Selector

use each() for loop.
$('#Stage_game_page1').children().each(function(index) {
// your code here with index starts from 0
});
or this using jquery attribute starts with selector
$('#Stage_game_page1').find('[id^="cube"]').each(function(index) {
// your code here
});

You need to use .find() or .children() or the like.

The correct jQuery usage would be
$("#Stage_game_page").find('#cube'+i)
to find a div with that id inside the container #stage_game_page

You have duplicate cube0 in your html code..
and i think the look should contain something like that:
$("#cube"+i)[...]

One another solution is:
$("#Stage_game_page1 div[id='cube0']")

Selecting all but the first child of parent with an ID and then applying action

I want to select all the child elements of a parent element (except the first) with jQuery and I have the below..
$("li:not(:first-child)");
But I'm not sure how I can apply it to just the certain parent ID, would something like this work?
$('#myID').("li:not(:first-child)");
If so, I then want to add an element before the respective <li> tag. Would I then be able to do this with?
$('#myID').("li:not(:first-child)").before('<li>Test</li>');
I'm guessing something above is wrong as it isn't working.

Close, just pass in the selector context:
$("li:not(:first-child)", "#myID")
http://api.jquery.com/jQuery/
jQuery( selector [, context] )
selector: A string containing a selector expression
context: A DOM Element, Document, or jQuery to use as context
EDIT:
My initial answer assumed that you have no more li within the child's li. if you strictly only wants to select the children, use >:
$("#myID > li:not(:first-child)")

There's different solutions:
$("li:not(:first-child)", "#myID"); // see #SiGanteng answer
$("#myID li:not(:first-child)");
$("#myID").find("li:not(:first-child)");

Simple: using the :gt() help selector:
Just do it like: demo fiddle
$("#myID li:gt(0)").before('<li>Test</li>');
If you are concerned about speed :) :
$("#myID").find("li:gt(0)").before('<li>Test</li>');
or like: demo fiddle
$("#myID li:not(:first-child)").before('<li>Test</li>');

Assuming #myID is a ul or ol element, another possible way to get all children but the first is
$('#myID').children().slice(1)