Develop Reference

Take text from several elements and add it to others, but dynamically with javascript or jquery

I've created this very simple structure just to describe what I want to do, let's say all the text in the name class is rendered, and I'm trying to find a way to make all the text in that class dynamically inserted into each #link, but without overwriting the name but concatenating, it would look like this test 02 Hulk and Test 02 Deadpool
jQuery('#link').append(jQuery('.name').text());
<nav class="navigation">
<ul id="navigation-item">
<li class="first">
<a class="name"> Hulk</a>
<ul>
<div>
<li>
<p>
test 00
</p>
</li>
<li></li>
<li>
<p>
test 01
</p>
</li>
<li>
<p>
<a id="link">test 02</a>
</p>
</li>
</div>
</ul>
</li>
<li class="second">
< a class="name"> Deadpool <a/>
<ul>
<div>
<li>
<p>
test 00
</p>
</li>
<li></li>
<li>
<p>
test 01
</p>
</li>
<li>
<p>
<a id="link">test 02</a>
</p>
</li>
</div>
</ul>
</li>
</ul>
</nav>
I created this structure as an example but it didn't work, because it takes the name Hulk and Deadpool and inserts everything together

The first thing you need to do is correct your HTML. Firstly you cannot have mulitiple elements in the DOM with the same id attribute. They need to be unique. In this case you are looking to group the elements so use a common class instead.
Secondly you cannot have a div as a child of a ul element, remove it.
Lastly, the correct closing tag for an a element is </a>, not <a/>.
Once that's been corrected the jQuery to do what you require will simply need to loop over the .link elements and append the text from their related a element. Try this:
jQuery($ => {
$('.link').each((i, el) => {
$(el).append(` ${$(el).closest('ul').prev('a').text()}`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navigation">
<ul id="navigation-item">
<li class="first">
<a class="name">Hulk</a>
<ul>
<li><p>test 00</p></li>
<li></li>
<li><p>test 01</p></li>
<li><p><a class="link">test 02</a></p></li>
</ul>
</li>
<li class="second">
<a class="name">Deadpool</a>
<ul>
<li><p>test 00</p></li>
<li></li>
<li><p>test 01</p></li>
<li><p><a class="link">test 02</a></p></li>
</ul>
</li>
</ul>
</nav>

Array.from($(".link")).forEach(function(elem, index){
$(elem).append($(".name").eq(index).text());
})
Just replace id with name attribute since W3C recommends creating a single element with an id.

How to display active top menu sub-items on bottom of page?

I have a top menu with some items that have sub-items. If the user clicks on an item that has sub items, I want these sub-items to be displayed in the bottom menu, so that when one reaches the bottom of the page it is easy to continue to a another sub-item.
Example: If the user clicks on "First" it should look like below.
<nav id='top-menu'>
<ul>
<li>
<a href='#'>First</a>
<ul>
<li>
<a href='#'>Sub-first</a>
</li>
<li>
<a href='#'>Sub-second</a>
</li>
</ul>
</li>
<li>
<a href='#'>Second</a>
</li>
</ul>
</nav>
<article>
Article text
</article>
<nav id='bottom-menu'>
<ul>
<li>
<a href='#'>Sub-first</a>
</li>
<li>
<a href='#'>Sub-second</a>
</li>
</ul>
</nav>

<details>
<summary>Heading #1</summary>
<nav>
Link A
</nav>
</details>
<details>
<summary>Heading #1</summary>
<nav>
Link B
</nav>
</details>
with out jquery by using html5 we can do it,if you dont like comment i will update with jquery more..in fiddle

if you are using jQuery you can try something like this:
var $bottomContainer = $('#bottom-menu');
$('#top-menu a').on('click', function(e){
e.preventDefault();
var $submenu = $(e.target).siblings('ul');
if (!$submenu.length) return;
$bottomContainer.empty().append($submenu.clone());
});

How to reach the next li a from a specific point

I need to change link color to the button below the id #idTERRITORIAL_8 which has the class .active_default, the idIMMUNOLOGY_9, but I cannot use that directly. My starting point has to be #idTERRITORIAL_8.
I tried this :
$('#idTERRITORIAL_8').parent().find('.active_default').addClass("red");
But all .active_default changed color.
I also tried next and nextAll
<div id="wrapper">
<ul class="menu">
<li>Overview</li>
<li>Sales
<ul>
<li>National</li>
<li>Provincial</li>
<li>Regional
<ul>
<li>Immunology</li>
<li>Coagulation</li>
</ul>
</li>
<li>Territorial
<ul>
<li>Immunology</li>
<li>Coagulation</li>
</ul>
</li>
<li>Depot</li>
</ul></li>
<li>ICP</li>
</ul>
</div>

$('#idTERRITORIAL_8').next().find('.active_default').addClass("red");
Link to jsbin example:
https://jsbin.com/lenotolaco/1/edit?html,js,output

How to add class dynamically using ajax.?

When i click on any name I have to add class "active" for selected name's anchor tag and as well as department names of that user.
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a>Rahul </a> <!--User -->
</li>
<li>
<a>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active">Rokesh </a>
</li>
<li>
<a>Preeti</a>
</li>
</ul>
</li>
</ul>
I am using below code, can anyone tell what correction i need to do..?
if (orgID != null && orgID == 'dId') {
$("#dId li a").removeClass("orglistactive");
$(this).attr("class","orglistactive");
var parentID = $(e.target).parent().parent().parent().attr("id");
alert($(e.target).parent().parent().parent().attr("id"));
$("#"+parentID+" a").attr("class","orglistactive");
}

Looks like you are trying to achieve something as shown below:
<script type="text/javascript">
var orgID = $('#dId');
if(orgID.attr('id') == 'dId'){
orgID.find('>li>a').addClass("orglistactive");
var parentID = orgID.attr("id");
alert(orgID.attr("id"));
}
</script>
But couple of things are found, are not correct from html and jquery perspective.
Id are unique but you have used 'dId' for more than one time.
e.target works only when there is an event attached with an element or can be captured using "window.event || e". In your code I could not see the purpose of e.target
Hope this helps! :)

This can be quickly achieved with a little of jQuery.
First Approach
$('ul a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at a live demo: http://jsfiddle.net/augusto1982/6xM2P/
Second Approach
One thing to keep in mind is that this code works ok if there's no other list in the page. If this is not the case, you should use some CSS class to determine the object to bind the click function. Otherwise, the jQuery selector gets a bit messy.
$('#orglistingid li ul li a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Example: http://jsfiddle.net/augusto1982/GXcvD/
Third Approach
I would also recommend you to add a class to each user anchor, to make it easier.
HTML
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at this second example: http://jsfiddle.net/augusto1982/GW4mt/
Final Approach
In order to avoid all the parent()...parent() calls, you could use the closest method, but you need to change your HTML a bit.
HTML
<ul id="orglistingid">
<li class='department'>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li class='department'>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).closest('.department').find('a:first').addClass('orglistactive');
});
Demo: http://jsfiddle.net/augusto1982/e7PVF/
Like other comments, I'd recommend you to have unique IDs. While this is not a restriction, is a best practice.

When click on menu item, change the body style

We need to do so that when you click on the main menu items, changed both style BODY, by default (body class = "front") front, but when you click on the menu, design, class will not front but work, when you click on the menu pretul (body class = "pret"), etc.
<jdoc:include type="modules" name="limbi" />
<h1 id="site-name">web site</h1>
<nav>
<!--
THIS MENU
-->
<ul class="main-nav" >
<li class="careers"><span class="menu-item-title">HOME</span>
</li>
<li class="work"><span class="menu-item-title">DESIGN</span>
</li>
<li class="pret"><span class="menu-item-title">Pretul</span>
</li>
<li class="promovare"><span class="menu-item- title">Promovare</span>
</li>
<li class="port"><span class="menu-item-title">Portofoliu</span>
</li>
<li class="contact"><span class="menu-item-title">Contacte</span>
</li>
</ul>
</nav>
</header>

If you want to change a class name of elements, you can use these Jquery methods.
http://api.jquery.com/removeClass/
http://api.jquery.com/addClass/
var body = $('body');
body.removeClass('front').addClass('design');