Get text content from nested list item class javascript - javascript

Screenshot with explanation
My shopify store has currency pop out menu that can be opened via an icon button ($).
It would be ideal to display the currency that is selected to the right hand side of the icon button.
The menu is an unordered list and the selected list item is assigned the class "active". The actual text content is wrapped inside a nested "a href:"
I added a <p> with the id "currName" to the right hand side of the icon button and have attempted to show the selected list item in this spot.
HTML:
<div class="tt-desctop-parent-multi tt-parent-box">
<div class="tt-multi-obj tt-dropdown-obj">
<div class="row">
<button class="tt-dropdown-toggle"
data-tooltip="{{ 'general.tooltip_texts.header_settings' | t }}"
data-tposition="bottom">
<i class="icon-e-49"></i><p id="currName"> </p> </button></div>
<div class="tt-dropdown-menu">
<div class="tt-mobile-add">
<button class="tt-close">Close</button>
</div>
<div class="tt-dropdown-menu" style="display: block;">
<div class="tt-dropdown-inner">
<ul class="menu_language_holder">
</ul>
<form method="post" action="/cart/update" id="currency_form" accept-charset="UTF-8" class="currency-selector small--hide MultiFile-intercepted" enctype="multipart/form-data"><input type="hidden" name="form_type" value="currency"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="return_to" value="/collections/carriers/products/piang-gouer-soft-cat-carrier-plain-print"><input name="currency" hidden="">
<ul class="currency-selector" data-currency-selector=""><li data-currency="AUD">
<a href="#">
$ Australian Dollar
</a>
</li><li data-currency="USD" class="active">
<a href="#">
$ United States Dollar
</a>
</li></ul></form></div>
</div><br><br>
My code:
<script>
let selectedCurrency = document.querySelectorAll("li, .currency-selector, .active, a[href^='#']").innerHTML;
document.getElementById('currName').innerHTML = selectedCurrency;
</script>
The result is undefined no matter which method I try.
Thanks :)


You need to simply replace document.querySelectorAll with document.querySelector
This will give you an output like this:
https://jsfiddle.net/hdro85k1/
The code will look like this then:
let selectedCurrency = document.querySelector("li, .currency-selector, .active, a[href^='#']").innerHTML;
document.getElementById('currName').innerHTML = selectedCurrency;
<div class="tt-desctop-parent-multi tt-parent-box">
<div class="tt-multi-obj tt-dropdown-obj">
<div class="row">
<button class="tt-dropdown-toggle"
data-tooltip="{{ 'general.tooltip_texts.header_settings' | t }}"
data-tposition="bottom">
<i class="icon-e-49"></i><p id="currName"> </p> </button></div>
<div class="tt-dropdown-menu">
<div class="tt-mobile-add">
<button class="tt-close">Close</button>
</div>
<div class="tt-dropdown-menu" style="display: block;">
<div class="tt-dropdown-inner">
<ul class="menu_language_holder">
</ul>
<form method="post" action="/cart/update" id="currency_form" accept-charset="UTF-8" class="currency-selector small--hide MultiFile-intercepted" enctype="multipart/form-data"><input type="hidden" name="form_type" value="currency"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="return_to" value="/collections/carriers/products/piang-gouer-soft-cat-carrier-plain-print"><input name="currency" hidden="">
<ul class="currency-selector" data-currency-selector=""><li data-currency="AUD">
<a href="#">
$ Australian Dollar
</a>
</li><li data-currency="USD" class="active">
<a href="#">
$ United States Dollar
</a>
</li></ul></form></div>
</div><br><br>


You should use the select tag instead of a list.
Example:
const currencySelector = document.getElementById("currency-selector");
currencySelector.addEventListener("change", (e) => {
console.log(e.target.value)
})
<select name="currency" id="currency-selector">
<option value="USD">Dollar</option>
<option value="EUR">Euro</option>
</select>

Related

Checkbox select by keyword?

I have to order many files within a website, select them by marking them and send them to their respective folders, the problem is that there are more than 12,000 thousand listings of 30 items each! different formats and things that you should sort by category... manually.
Then I ask for your help to create a script that selects the files by keyword, that is, if a compressed file contains the keyword 'MacOS' because I select it and send it to its respective folder, let's see these images that will help me explain better what I wish:
Our robot friend would go through the whole section where these three elements of examples appear.
(1) I would find the keyword 'Mac.OS' - lowercase or uppercase.
(2) And it would select the matching element.
HTML of this section: (For reasons of quantity of characters I have limited the HTML, complete DEMO in JSFiddle)
<div id="FilesListContainer">
<form action="/action/Files/FilesList" autocomplete="off" id="FileListForm" method="post"> <input name="chomikName" type="hidden" value="chomikuj8ceggd">
<input name="folderId" type="hidden" value="779">
<input name="fileListSortType" type="hidden" value="Date">
<input name="fileListAscending" type="hidden" value="False">
<input name="gallerySortType" type="hidden" value="Name">
<input name="galleryAscending" type="hidden" value="False">
<input name="pageNr" type="hidden" value="1">
<input name="isGallery" type="hidden" value="False">
</form>
<div class="borderRadius tab" id="sortTab">
<ul class="borderRadius tabGradientBg">
<li class="selected" style="width:130px;">sortuj według:</li>
<li><form action="">nazwa<input name="fileListSortType" type="hidden" value="Name"><input name="fileListAscending" type="hidden" value="False"></form></li>
<li><form action="">typ pliku<input name="fileListSortType" type="hidden" value="Type"><input name="fileListAscending" type="hidden" value="False"></form></li>
<li><form action="">rozmiar<input name="fileListSortType" type="hidden" value="Size"><input name="fileListAscending" type="hidden" value="False"></form></li>
<li><form action=""><a class="selected" href="#" rel="nofollow" title="data dodania">data dodania <img alt="Malejąco" src="//x4.static-chomikuj.pl/res/7c24b1ecca.png"></a><input name="fileListSortType" type="hidden" value="Date"><input name="fileListAscending" type="hidden" value="True"></form></li>
<li style="width:30px;"><span><input type="checkbox" class="selectAllFiles" value="" name=""></span></li>
</ul>
</div>
<div id="listView" style="display: block">
<div class="filerow fileItemContainer">
<div class="fileinfo tab">
<ul class="borderRadius tabGradientBg">
<li><span>8,0 MB</span></li>
<li><span class="date">11 mar 19 5:18</span></li>
<li><span><input type="checkbox" value="6733949428" name="selectFileItem"></span></li>
</ul>
</div>
<div class="fileActionsButtons clear visibleButtons fileIdContainer" rel="6733949428" style="visibility: hidden;">
<ul>
<li><a class="showFileRating ratingBtn" href="javascript:;" title="Oceń plik"><span class="star5"></span></a></li>
<li><img alt="pobierz" src="//x4.static-chomikuj.pl/res/503435f17e.png" title="pobierz"></li>
<li class="fileCommentsAction"><img alt="komentarze" src="//x4.static-chomikuj.pl/res/d9b637b7b4.png" title="komentarze"></li>
<li class="fileActionsFacebookSend" data-url="http://chomikuj.pl/chomikuj8ceggd/fff/Excel.Data.Analysis.For.Dummies.4th.Edition,6733949428.epub" data-title="Excel.Data.Analysis.For.Dummies.4th.Edition">
<img alt="Podziel się na Facebook" src="//x4.static-chomikuj.pl/res/585911b602.gif" title="Podziel się na Facebook">
</li>
<li><a class="showFileOptions" href="#" title="opcje" rel="nofollow"><img alt="opcje" src="//x4.static-chomikuj.pl/res/e174c25b70.png" title="opcje"></a></li>
</ul>
</div>
<div onmouseover="$('.visibleArrow', this).css('visibility', 'visible')" onmouseout="$('.visibleArrow', this).css('visibility', 'hidden');" class="filename txt">
<h3>
<a class="expanderHeader downloadAction downloadContext" href="/chomikuj8ceggd/fff/Excel.Data.Analysis.For.Dummies.4th.Edition,6733949428.epub" title="Excel.Data.Analysis.For.Dummies.4th.Edition">
<span class="bold">Excel.Data.Analysis.For.Dummies.4th.Edition</span>.epub
</a>
<img alt="pobierz" class="downloadArrow visibleArrow" src="//x4.static-chomikuj.pl/res/99a19ffb28.png" style="visibility: hidden;" title="pobierz">
</h3>
</div>
<div style="clear:left;">
<div rel="Other" class="expType" style="visibility: hidden">
<a rel="highslide"></a>
</div>
<span class="filedescription" style="display: none">
</span>
</div>
<div class="clear">
</div>
</div>
<div class="filerow fileItemContainer">
<div class="fileinfo tab">
<ul class="borderRadius tabGradientBg">
<li><span>9,1 MB</span></li>
<li><span class="date">11 mar 19 5:13</span></li>
<li><span><input type="checkbox" value="6733945278" name="selectFileItem"></span></li>
</ul>
</div>
<div class="fileActionsButtons clear visibleButtons fileIdContainer" rel="6733945278" style="visibility: hidden;">
<ul>
<li><a class="showFileRating ratingBtn" href="javascript:;" title="Oceń plik"><span class="star5"></span></a></li>
<li><img alt="pobierz" src="//x4.static-chomikuj.pl/res/503435f17e.png" title="pobierz"></li>
<li class="fileCommentsAction"><img alt="komentarze" src="//x4.static-chomikuj.pl/res/d9b637b7b4.png" title="komentarze"></li>
<li class="fileActionsFacebookSend" data-url="http://chomikuj.pl/chomikuj8ceggd/fff/Ad0b3.Zii.2019-Universal.Patcher.v4.1.7.Mac.OS.X_TNT,6733945278.rar(archive)" data-title="Ad0b3.Zii.2019-Universal.Patcher.v4.1.7.Mac.OS.X_TNT">
<img alt="Podziel się na Facebook" src="//x4.static-chomikuj.pl/res/585911b602.gif" title="Podziel się na Facebook">
</li>
<li><a class="showFileOptions" href="#" title="opcje" rel="nofollow"><img alt="opcje" src="//x4.static-chomikuj.pl/res/e174c25b70.png" title="opcje"></a></li>
</ul>
</div>
<div onmouseover="$('.visibleArrow', this).css('visibility', 'visible')" onmouseout="$('.visibleArrow', this).css('visibility', 'hidden');" class="filename zip">
<h3>
<a class="expanderHeader downloadAction downloadContext" href="/chomikuj8ceggd/fff/Ad0b3.Zii.2019-Universal.Patcher.v4.1.7.Mac.OS.X_TNT,6733945278.rar(archive)" title="Ad0b3.Zii.2019-Universal.Patcher.v4.1.7.Mac.OS.X_TNT">
<span class="bold">Ad0b3.Zii.2019-Universal.Patcher.v4.1.7.Mac.OS.X_T<span class="e"> </span>NT</span>.rar
</a>
<img alt="pobierz" class="downloadArrow visibleArrow" src="//x4.static-chomikuj.pl/res/99a19ffb28.png" style="visibility: hidden;" title="pobierz">
</h3>
</div>
<div style="clear:left;">
<div rel="Other" class="expType" style="visibility: hidden">
<a rel="highslide"></a>
</div>
<span class="filedescription" style="display: none">
</span>
</div>
<div class="clear">
</div>
</div>
<div class="filerow alt fileItemContainer">
<div class="fileinfo tab">
<ul class="borderRadius tabGradientBg">
<li><span>1,40 GB</span></li>
<li><span class="date">11 mar 19 5:13</span></li>
<li><span><input type="checkbox" value="6733945277" name="selectFileItem"></span></li>
</ul>
</div>
<div class="fileActionsButtons clear visibleButtons fileIdContainer" rel="6733945277" style="visibility: hidden;">
<ul>
<li><a class="showFileRating ratingBtn" href="javascript:;" title="Oceń plik"><span class="star5"></span></a></li>
<li><img alt="pobierz" src="//x4.static-chomikuj.pl/res/503435f17e.png" title="pobierz"></li>
<li class="fileCommentsAction"><img alt="komentarze" src="//x4.static-chomikuj.pl/res/d9b637b7b4.png" title="komentarze"></li>
<li class="fileActionsFacebookSend" data-url="http://chomikuj.pl/chomikuj8ceggd/fff/Ad0b3.M3di4.3nc0d3r.CC.2019.v13.0.2-Crack.Mac.OS.X-CracksNow,6733945277.dmg(archive)" data-title="Ad0b3.M3di4.3nc0d3r.CC.2019.v13.0.2-Crack.Mac.OS.X-CracksNow">
<img alt="Podziel się na Facebook" src="//x4.static-chomikuj.pl/res/585911b602.gif" title="Podziel się na Facebook">
</li>
<li><a class="showFileOptions" href="#" title="opcje" rel="nofollow"><img alt="opcje" src="//x4.static-chomikuj.pl/res/e174c25b70.png" title="opcje"></a></li>
</ul>
</div>
<div onmouseover="$('.visibleArrow', this).css('visibility', 'visible')" onmouseout="$('.visibleArrow', this).css('visibility', 'hidden');" class="filename iso">
<h3>
<a class="expanderHeader downloadAction downloadContext" href="/chomikuj8ceggd/fff/Ad0b3.M3di4.3nc0d3r.CC.2019.v13.0.2-Crack.Mac.OS.X-CracksNow,6733945277.dmg(archive)" title="Ad0b3.M3di4.3nc0d3r.CC.2019.v13.0.2-Crack.Mac.OS.X-CracksNow">
<span class="bold">Ad0b3.M3di4.3nc0d3r.CC.2019.v13.0.2-Crack.Mac.OS.X<span class="e"> </span>-CracksNow</span>.dmg
</a>
<img alt="pobierz" class="downloadArrow visibleArrow" src="//x4.static-chomikuj.pl/res/99a19ffb28.png" style="visibility: hidden;" title="pobierz">
</h3>
</div>
<div style="clear:left;">
<div rel="Other" class="expType" style="visibility: hidden">
<a rel="highslide"></a>
</div>
<span class="filedescription" style="display: none">
</span>
</div>
<div class="clear">
</div>
</div>
<div class="smallBL" id="selectedFilesActionButtons">
<ul class="disabled">
<li class="">
<a class="button smallButton copyFilesBtn" href="javascript:;">
<img alt="Kopiuj" src="//x4.static-chomikuj.pl/res/8638d1a887.png" title="Kopiuj">
</a>Kopiuj</li>
<li class="">
<a class="button smallButton moveFilesBtn" href="javascript:;">
<img alt="Przenieś" src="//x4.static-chomikuj.pl/res/72d861f112.png" title="Przenieś"></a>Przenieś</li>
<li class="">
<a class="button smallButton deleteFilesBtn" href="javascript:;">
<img alt="Usuń" src="//x4.static-chomikuj.pl/res/4c264123ef.png" title="Usuń"></a>Usuń</li>
</ul>
<p>Zaznaczone pliki:</p>
<div class="clear"></div>
</div>
</div> </div>
(3) I would click on 'Move'
<li class="">
<a class="button smallButton moveFilesBtn" href="javascript:;">
<img alt="Przenieś" src="//x4.static-chomikuj.pl/res/72d861f112.png" title="Przenieś"></a>Przenieś</li>
(4) Wait for this window to appear
<div id="ui-tooltip-filesAction" class="ui-tooltip qtip ui-helper-reset ui-tooltip-default dialogWindow ui-tooltip-pos-c ui-draggable" tracking="false" role="alert" aria-live="polite" aria-atomic="false" aria-describedby="ui-tooltip-filesAction-content" aria-hidden="false" style="width: 261px; z-index: 15002; top: 497.333px; left: 477px; display: block; opacity: 1;"><div class="ui-tooltip-titlebar"><div id="ui-tooltip-filesAction-title" class="ui-tooltip-title" aria-atomic="true">Kopiowanie plików</div><a class="ui-state-default ui-tooltip-close ui-tooltip-icon" title="Zamknij" aria-label="Zamknij" role="button"><span class="ui-icon ui-icon-close">×</span></a></div><div class="ui-tooltip-content" id="ui-tooltip-filesAction-content" aria-atomic="true"><div style="display: block;">
<form action="/action/FileDetails/MoveFilesAction" method="post"><input id="ChomikName" name="ChomikName" type="hidden" value="chomikuj8ceggd"><input id="FolderId" name="FolderId" type="hidden" value="779"> <input type="hidden" name="Files" value="6733945277">
<input id="FolderTo" name="FolderTo" type="hidden" value="0"> <div>
<p>Jesteś w trybie przenoszenia.Aby przenieść plik do innego folderu
wystarczy w drzewie folderów Twojego Chomika kliknąć na docelowy folder.</p>
<input type="reset" class="greenButtonCSS" value="Anuluj przenoszenie">
</div>
</form></div></div></div>
(5) And finally click on the corresponding folder
<span class="newfile_s">MAC</span>
(3) It could be accessed from your class
(5) It is easy to access it by your ID
The method to select or mark checkboxes I am afraid that it has to be similar to the 'click' that is given with the mouse, I say it because selecting with the method .prop (' checked ', true) marks them but does not enable the 'Move' option:
Marked with script⚠️
Manual marked✅
Maybe a MouseEvent (' click ', is correct here, I do not have the necessary knowledge to ensure it
As I mentioned before, for questions of quantity of characters I put the HTML abbreviated, functional, but abbreviated. Now I leave a link to the full DEMO in JSFiddle
Script
Maybe, just maybe you can place the script inside this code so that you execute it every time you press the' enter 'key
If there is a better way then I accept it gladly!
document.onkeyup = function(e){
document.onkeyup = function(e){
if(e){
var key = window.event ? e.keyCode : e.which;
}else{
var key = window.event ? event.keyCode : event.which;
}
if (key == '13') {
//Code you would like to execute
}
}
}
- Final clarifications:
It would be for a Tampermonkey script
Javascript or JQuery
The idea is that when executing the script everything is marked with the chosen keyword and then clicks send that to the folder
I'm pretty new to this (it's a bit hard to
understand haha)

How to remove option from auto completion select list using jQuery

I want to remove the option from the auto completion input drop down select list.
Unable to get the option value until unless i click on input drop down list. Once I click on the input field the options are auto populating, But i dont know how to get the option here.
The input field before click on it:
<div class="field-group">
<label for="add-reminders-role-picker">Project Role</label>
<div class="aui-ss" id="add-reminders-role-picker-single-select">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="add-reminders-role-picker-field">
<div class="aui-list" id="add-reminders-role-picker-suggestions" tabindex="-1"></div>
<span class="icon aui-ss-icon noloading drop-menu"><span>More</span></span></div>
<select class="aui-field-select select aui-ss-select" name="roleName" id="add-reminders-role-picker" multiple="multiple" style="display: none;">
<option value=""></option>
</select>
</div>
After click on input field:
<div class="field-group">
<label for="add-reminders-role-picker">Project Role</label>
<div class="aui-ss" id="add-reminders-role-picker-single-select" data-query="">
<input autocomplete="off" class="text aui-ss-field ajs-dirty-warning-exempt" id="add-reminders-role-picker-field">
<div class="ajs-layer-placeholder">
<div class="ajs-layer box-shadow" style="width: 248px; position: fixed; left: 153.667px; top: 399.167px; max-height: 171.833px; display: none;">
<div class="aui-list" id="add-reminders-role-picker-suggestions" tabindex="-1" style="display: block;">
<div class="aui-list-scroll" tabindex="-1">
<h5>Project role</h5>
<ul class="aui-list-section aui-last" id="project-role">
<li class="aui-list-item aui-list-item-li-administrators active">
<a class="aui-list-item-link" href="#" title="Administrators">Administrators</a>
</li>
<li class="aui-list-item aui-list-item-li-developers">
<a class="aui-list-item-link" href="#" title="Developers">Developers</a>
</li>
<li class="aui-list-item aui-list-item-li-event-watchers">
<a class="aui-list-item-link" href="#" title="Event Watchers">Event Watchers</a>
</li>
<li class="aui-list-item aui-list-item-li-privilege-users">
<a class="aui-list-item-link" href="#" title="Privilege Users">Privilege Users</a>
</li>
<li class="aui-list-item aui-list-item-li-users">
<a class="aui-list-item-link" href="#" title="Users">Users</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<span class="icon aui-ss-icon drop-menu noloading"><span>More</span></span></div>
<select class="aui-field-select select aui-ss-select" name="roleName" id="add-reminders-role-picker" multiple="multiple" style="display: none;">
<option value=""></option>
</select>
</div>
Here I want to remove the "Users" option from the 'li' in the second code snippet. Please help me regarding this.

Try:
$('#aui-list-item-li-users').remove();
this code will remove the 'li' with the class = aui-list-item-li-users

Select a tag from different form

I have two forms and each form has different a tag, but when I use Javascript to use a tag different form, I can work on the a tag from the first form. How can make Javascript so that I can work on different a tag from different forms.
My codes are shown below.
Form to sell
<body>
<form class="summarybackground" name="sell" id="sell" style="height:500px;width:920px;overflow-y:hidden;" method="post">
<div class="myBox">
<nav id="cd-vertical-nav">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Landed</span>
</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1 class="header double">Landed</h1>
</div>
</div>
</form>
Form to rent
<form class="summarybackground" name="rent" id="rent" style="height:500px;width:920px;overflow-y:hidden;" method="post">
<div class="myBox">
<nav id="cd-vertical-nav-sec">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Landed</span>
</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1 class="header double">Landed</h1>
</div>
</div>
</form>
</body>
This script can work on the first form's a tag only.
<script>
$('a').click(function () {
$('a').removeClass('is-selected');
$(this).addClass('is-selected');
});
</script>
How to make a script so that I can work on both forms?

Find your a using it's parent
<script>
$('#rent a').click(function () {
$('#rent a').removeClass('is-selected');
$(this).addClass('is-selected');
});
</script>
You can do similar thing for your next form

Generating URL for AJAX query based on checkboxes and dropdowns

I have an options panel that looks like this:
Attached is my HTML code:
HTML
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Times You Don't Want Classes</h3>
</div>
<div class="panel-body panel-options">
<div id="days" class="checkbox">
<label>
<input type="checkbox"> Mon
</label>
<label>
<input type="checkbox"> Tues
</label>
<label>
<input type="checkbox"> Wed
</label>
<label>
<input type="checkbox"> Thurs
</label>
<label>
<input type="checkbox"> Fri
</label>
</div>
<div class="btn-group">
<a id="from-text" class="btn btn-default">10:00 AM</a>
<a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul id="from" class="dropdown-menu time-span">
// These are simply time increments from 7 AM to midnight
#foreach ($timeIncrements as $increment)
<li>{{ $increment }}</li>
#endforeach
</ul>
</div>
to
<div class="btn-group">
<a id="to-text" class="btn btn-default">12:00 PM</a>
<a data-target="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul id="to" class="dropdown-menu time-span">
#foreach ($timeIncrements as $increment)
<li>{{ $increment }}</li>
#endforeach
</ul>
</div>
</div>
</div>
What I want to do is, when the user clicks the Monday.. Tuesday.. Wednesday.. and the from-and-to times, to generate a URL for my AJAX code to query that particular URL.
My API looks like the following URL:
example.org/schedulizer/schedule?from=1000&to=1200&days=MW
As you can see, from and to are the spans in which the user does not want classes (so 10 AM to 12 PM in our case)
days are the days they want the span to satisfy (Monday and Wednesday in our case)
This is what I have so far for my JS
JS:
<script type="text/javascript">
$(function()
{
$('#from li').on('click', function(){
$('#from-text').text($(this).text());
});
$('#to li').on('click', function(){
$('#to-text').text($(this).text());
});
$(function(){
$("input[type='checkbox']").change(function(){
var item=$(this);
if(item.is(":checked"))
{
console.log($('#days').attr('value'));
}
});
});
});
</script>
I am quite new to Javascript, so I am quite lost on how to begin. How would I take the values from the checkboxes and dropdowns and generate a URL based on what's selected?

How can send the classes with the same category id to javascript and javascript send the results to another id and class?

1.I Want send the id name categ_1 and categ_2 in the example below id cat_no_1 and cat_no_2
2.I Want send the class with the same id of categ_1 and categ_2 in the example below class cat_no_1 and cat_no_2
<div class="categ" style="display:none;">
<div class="the_categories" id="categ_1">Colors 1</div>
<span class="categ_1">Blue</span>
<span class="categ_1">Red</span>
<span class="categ_1">Green</span>
<div class="the_categories" id="categ_2">Colors 2</div>
<span class="categ_2">Yellow</span>
<span class="categ_2">Grey</span>
<span class="categ_2">White</span>
</div>
For example results on site:
<div class="button">
<a class="button dropdown" id="cat_no_1">Colors 1</a>
<div class="dropdown-menu hold-on-click dropdown-checkboxes">
<label class="cat_no_1">Blue</label>
<label class="cat_no_1">Red</label>
<label class="cat_no_1">Green</label>
</div>
</div>
<div class="button">
<a class="button dropdown" id="cat_no_2">Colors 2</a>
<div class="dropdown-menu hold-on-click dropdown-checkboxes">
<label class="cat_no_2">Yellow</label>
<label class="cat_no_2">Grey</label>
<label class="cat_no_2">White</label>
</div>
</div>

Categories

Resources