We Keep Coding

How to make two elements to be under each other in a list of inputs?

In my program, I want to have a list of my inputs to be under each other. However, if the input of the foods field is shorter/longer (let's say it's apple) than the one above it (cabbage), the inputs of datefield shift themselves.
This is what it looks like:
This program is for a school project and I am stuck with this problem since 2 weeks.
function addFoodsAndDate(event) {
foodsdate.innerHTML += `
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
${foodsfield.value}
</span>
<span class="mdl-list__item-primary-content">
${datefield.value}
</span>
</li>
`;
foodsfield.value += ``;
datefield.value += ``;
return false;
}
.demo-list-item {
width: 320px;
}
.page-content {
padding: 20px 100px;
float: left
}
body {
background: #3d3d3d
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Kühlflex Web-App</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
</div>
</header>
<main class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
<form onsubmit="return addFoodsAndDate()">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="foodsfield">
<label class="mdl-textfield__label" for="foodsfield">Deine Lebensmittel...</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9+.]*(\.[0-9+.]+)?" id="datefield">
<label class="mdl-textfield__label" for="datefields">Datum...</label>
<span class="mdl-textfield__error">Datum eingeben!</span>
</div>
<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Hinzufügen
</button>
</form>
<ul class="demo-list-icon mdl-list" id="foodsdate">
</ul>
</div>
</main>
</div>
I already tried the float: left method but I'm unsure if I used it correctly.
Thanks in advance

Here is an example with flex. You add display: flex; to the <li> element and the direct children are placed the "flex way". With justify: content; the children are placed an equal distance apart from each other, as far as the parent container allows. The parent I've set to 320px so the first child is placed at the beginning and the last is "pushed" to the end. If there were more than two children, they would be placed with equal distance to each other and span all 320px (I've added an example of that).
There are many more ways of spacing items, but this is an easy and popular (and more modern?) way of doing it:
.mdl-list {
width: 320px;
}
.mdl-list__item {
display: flex;
justify-content: space-between;
}
<ul class="demo-list-icon mdl-list" id="foodsdate">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Apple
</span>
<span class="mdl-list__item-primary-content">
12.12.22
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Cabbage
</span>
<span class="mdl-list__item-primary-content">
12.12.22
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Many
</span>
<span class="mdl-list__item-primary-content">
items
</span>
<span class="mdl-list__item-primary-content">
with
</span>
<span class="mdl-list__item-primary-content">
equal
</span>
<span class="mdl-list__item-primary-content">
space
</span>
</li>
</ul>

If you want to format tabular / two-dimensional data, use a <table>.
Working Example:
th,
td {
width: 40vw;
text-align: left;
}
<table>
<thead>
<th>Deine Lebensmittel</th>
<th>Datum</th>
</thead>
<tbody>
<tr>
<td class="lebensmittel">Apple</td>
<td class="datum">2022-12-12</td>
</tr>
<tr>
<td class="lebensmittel">Cabbage</td>
<td class="datum">2022-12-12</td>
</tr>
</tbody>
</table>

Selecting Div Rows to highlight it one at a time

[enter image description here][1]I am creating an examination appointment, and I wanted to highlight the selected row as green each time I clicked on it one at a time. The data in the rows are from the database. I tried to put class directly inside the div but the two rows were highlighted.
Thank you in advance
here's the output
$(document).on('click', '.selectdate', function(){
var selected = $('#walakapake').hasClass("highlight");
$("walakapake").removeClass("row");
if(!selected)
{
$('#walakapake').addClass("row highlight");
}
});
<style type="text/css">
#table-wrapper {
position:relative;
}
#table-scroll {
height:500px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100%;
}
#walakapake:hover{
background-color: #fafafa;
}
.highlight { background-color: red; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
</script>
<div id="table-wrapper">
<div id="table-scroll">
<div class="container" >
<a name="submitting" class="selectdate" id="1">
<div class="row" style="border-style: solid; border-width: 1px; cursor: pointer; " id="walakapake" >
<div class="col-2 text-right">
<br>
<h1 class="display-4"><span class="badge badge-info">24</span></h1>
<h2 style="text-transform: uppercase;" id="month_name" >NOV</h2>
</div>
<div class="col-10">
<br>
<h3 class="text-uppercase"><strong>Examination day</strong></h3>
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-calendar-o" aria-hidden="true"></i> Sunday | 2019</li>
<li class="list-inline-item"><i class="fa fa-clock-o" aria-hidden="true"></i> 8:00AM - 3:00PM</li>
<li class="list-inline-item" style="color: orange;" ><i class="fa fa-location-arrow" aria-hidden="true" style="color: black;" ></i> Slot 32</li>
</ul>
<p>Please bring your requirements</p>
<br>
</div>
</div>
</a>
<br>
<br>
<a name="submitting" class="selectdate" id="2">
<div class="row" style="border-style: solid; border-width: 1px; cursor: pointer; " id="walakapake" >
<div class="col-2 text-right">
<br>
<h1 class="display-4"><span class="badge badge-info">23</span></h1>
<h2 style="text-transform: uppercase;" id="month_name" >NOV</h2>
</div>
<div class="col-10">
<br>
<h3 class="text-uppercase"><strong>Examination day</strong></h3>
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-calendar-o" aria-hidden="true"></i> Saturday | 2019</li>
<li class="list-inline-item"><i class="fa fa-clock-o" aria-hidden="true"></i> 8:00AM - 3:00PM</li>
<li class="list-inline-item" style="color: orange;" ><i class="fa fa-location-arrow" aria-hidden="true" style="color: black;" ></i> Slot 32</li>
</ul>
<p>Please bring your requirements</p>
<br>
</div>
</div>
</a>
</div>
</div>
</div>

$('.foo').click(function() {
$('.foo').removeClass('highlight'); //Removes every highlight
$(this).addClass('highlight'); //sets highlight to the clicked one
});
.highlight {
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="foo">Element 1</li>
<li class="foo">Element 2</li>
<li class="foo">Element 3</li>
</ul>

Expanding and collapsing in UL tag

I have the follwing HTML, where there is a collapse (collapsebutton1) and expand button (expandbutton1) which will collapse and expand the div networkDevicesCollapsePanel, this is working as expected.
Now i need to bring the collapse and expand in each < UL >. There are three UL here, but there may be more later. How to achieve this?
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;">
<div ng-show="ciAttributesCount>0" id="collapsebutton1" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount>0" id="expandbutton1" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="panel-collapse collapse in" id="networkDevicesCollapsePanel">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a> <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span><br />
</li>
</ul>
</div>
</div>
</div>
Button Click code below
$("#expandbutton1").hide();
$("#expandbutton1").click(function () {
$('#networkDevicesLinks div.panel-collapse').addClass('in').css("height", "");
$("#expandbutton1").hide();
$("#collapsebutton1").show();
$('a[data-toggle="collapse"]').each(function (index) {
$(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
});
});
$("#collapsebutton1").click(function () {
$('#networkDevicesLinks div.panel-collapse').removeClass('in');
$("#expandbutton1").show();
$("#collapsebutton1").hide();
$('a[data-toggle="collapse"]').each(function (index) {
$(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
});
});
});

It may provide an idea,Try to use angular $index to toggle arrow and toggle client div.
And in angular we can assign each UL with dynamic classes which is hosted from expand and collapse button
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;" ng-repeat="nav in ciRelationshipHierarchyBySection track by $index">
<div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount" id="expandbutton1_{{$index}}" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="" >
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a> <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span><br />
</li>
</ul>
</div>
</div>
</div>
Revised Code below:
I am able to put collapse button in each repeat, but when i click, it opening a popup , instead of collapsing and expanding. Please see where it is wrong
<div class="">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">
<li>
<div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a>
<span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span>
<br />
<span style="padding: 2px 12px;">Data Source: {{nav.DataSource}}</span>
<br />
<span style="padding: 2px 12px;">Create New: {{nav.IsCreateNew}}</span>
<br />
</li>
</ul>
</div>

Toggle addclass with jquery parent selector

I have some items products in a grid.
I want that when i click on each icon from item, it will toggle a class '.active' and also remove class if others from others items are visible.
This is my script so far, can add the class remove from others items but when i click on the same icon it doesn't toggle it (remove the class).
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$('.items').find('.actions').not($this).removeClass('active');
$that.find('.actions').toggleClass('active');
});
<ul class="products-grid row">
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="/images/myimage.png" "/>
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic"></span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>

You need to remove this row:
$('.items').find('.actions').not($this).removeClass('active');
Because in your function you first remove the class, and then toggle it. In this case, if the element already has active class, it will be removed first, and then toggle will add it again (it looks like the element still has an active class, because operations are very fast). I have removed the row as described above and added some styles to see the difference, so here is the working snippet (click on "Show Actions" to see the difference):
$('.items #show-actions').on('click', function(event) {
event.preventDefault();
var $this = $(this).parent().parent('.items');
var $that = $(this).closest('.items');
$that.find('.actions').toggleClass('active');
});
.items #show-actions {
width: 100vw;
background-color: royalblue;
color: white;
}
.active {
background-color: red;
}
img {
width: 50px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<img src="https://pp.userapi.com/c629327/v629327473/db66/r051joYFRX0.jpg" />
<div class="product-info">
<span id="show-actions" class="glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">Show Actions</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>

First, you can't have duplicate ID's on any HTML page. I suggest you change #show-actions to a class for the rather than an ID.
Second, you also have some extra quote marks in your img element.
Once you do that it's pretty simple.
$('.show-actions').on('click', function() {
var items = $('.items');
items.removeClass('active');
$(this).parent().parent('.items').addClass('active');
});
.active {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-grid row">
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
<li class="items">
<a class="product-image"><img src="/images/myimage.png"/></a>
<div class="product-info">
<span class="show-actions glyphicon glyphicon-option-horizontal visible-sm visible-xs ic">TOGGLE ME</span>
<h2 class="product-brand">Test</h2>
<div class="actions text-center hidden">
<button class="btn-block">Ok</button>
</div>
</div>
</li>
</ul>

How can I append all selected checkboxes into a span

please help.
I created two dropdowns that displays selected checkboxes with icons.
the problem is those two dropdowns is not acting independently.
If I change something in dropdown 2 (What security does the space have)
all content from dropdown 1 is also added.
I need the dropdown functionality to work on multiple dropdowns.
Note: I need I icons to be added in the selected checkbox. ie
in the dropdown-toggle div where the selected checkbox is being displayed :)
Also the selected checkbox is not displaying right away. i need to click it again in order to display the selected checkbox
https://jsfiddle.net/gilbertlucas46/szyz4031/4/
function getValueUsingClass(){
$(".checkbox-list li label").click(function() {
/* declare an checkbox array */
var features_checkedBox = []
/* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
$(" .checkbox-list li input:checked + label").each(function() {
allChecked = $(this).html();
features_checkedBox.push(allChecked);
$(this).parents('.dropdown').find('.dropdown-toggle').html('<span class="selections">' + features_checkedBox + '<i class="glyphicon glyphicon-menu-down"> </i> </span>');
});
})
}
getValueUsingClass();
$('.dropdown-menu').on('click', function(e) {
if($(this).hasClass('checkbox-list')) {
e.stopPropagation();
}
});
.dropdown-select .dropdown-toggle {
background: #71c621;
background: linear-gradient(135deg, #71c621 0%, #5bab41 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71c621', endColorstr='#5bab41',GradientType=1 );
width: 100%;
height: 42px;
line-height: 42px;
padding: 0;
font-size: 14px !important;
font-weight: normal;
border: 2px solid #71c621;
position: relative;
overflow: hidden;
}
.dropdown-select .dropdown-menu {
display: none;
}
.dropdown-select {
position: relative;
}
.dropdown-select.open .dropdown-menu {
display: block !important;
width: 100%;
top: 50px;
}
label {
cursor: pointer;
display: block;
border-bottom: 1px solid gray;
width: 100%;
}
input {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="row">
<div class="col col-md-6">
<fieldset data-form-field="required-group" class="suitability">
<legend>What is the space suitable for </legend>
<div class="button-group dropdown dropdown-select checkDropdowns">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Suitable for? <i class="glyphicon glyphicon-menu-down"> </i></a>
<ul class="checkbox-list dropdown-menu">
<li>
<input type="checkbox" id="transactable-storage-purpose-clothes" value="Clothes" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-clothes">
<i class="glyphicon glyphicon-volume-off"></i> Clothes
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-caravan" value="Caravan" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-caravan">
<i class="glyphicon glyphicon-flag"></i> Caravan
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-boat" value="Boat" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-boat">
<i class="glyphicon glyphicon-headphones"></i> Boat
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-car" value="Car" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-car">
<i class="glyphicon glyphicon-backward"></i>Car
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-furniture" value="Furniture" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-furniture">
<i class="glyphicon glyphicon-resize-small"></i> Furniture
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-docs" value="Office Docs" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-docs">
<i class="glyphicon glyphicon-plane"></i> Office Docs
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-trailer" value="Trailer" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-trailer">
<i class="glyphicon glyphicon-magnet"></i> Trailer
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-workshop" value="Workshop" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-workshop">
<i class="icon icon-workshop"></i> Workshop
</label>
</li>
<li>
<input type="checkbox" id="transactable-storage-purpose-container" value="Container" data-required-group="storage_purpose" data-storage-purpose="">
<label for="transactable-storage-purpose-container">
<i class="glyphicon glyphicon-leaf
glyphicon "></i> Container
</label>
</li>
</ul>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col col-md-6">
<fieldset class="security">
<legend>What security does the space have <a href="#" data-toggle="popover" data-content="Let prospective renters know what security features your space has. You can select multiple options.">
<i class="fa fa-question-circle"></i></a></legend>
<div class="button-group dropdown dropdown-select checkDropdowns detailsDrop">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Select Security Features <i class="glyphicon glyphicon-menu-down"> </i></a>
<ul class="checkbox-list dropdown-menu">
<li data-value="<i class='icon icon-alarm'">
<input type="checkbox" id="transactable-security-alarm" value="4750" data-security="">
<label for="transactable-security-alarm">
<i class="icon icon-alarm"></i> <span class="title">Alarm</span>
</label>
</li>
<li data-value="<i class='icon icon-cctv'">
<input type="checkbox" id="transactable-security-cctv" value="4751" data-security="">
<label for="transactable-security-cctv">
<i class="icon icon-cctv"></i> <span class="title">CCTV</span>
</label>
</li>
<li data-value="<i class='icon icon-deadlock'">
<input type="checkbox" id="transactable-security-deadlock" value="4752" data-security="">
<label for="transactable-security-deadlock">
<i class="icon icon-deadlock"></i> <span class="title">Deadlock</span>
</label>
</li>
<li data-value="<i class='icon icon-security-bars'">
<input type="checkbox" id="transactable-security-security-bars" value="5960" data-security="">
<label for="transactable-security-security-bars">
<i class="icon icon-security-bars"></i> <span class="title">Security Bars</span>
</label>
</li>
<li data-value="<i class='icon icon-lock'">
<input type="checkbox" id="transactable-security-combination-lock" value="4753" data-security="">
<label for="transactable-security-combination-lock">
<i class="icon icon-lock"></i> <span class="title">Combination Lock</span>
</label>
</li>
<li data-value="<i class='icon icon-roller-door'">
<input type="checkbox" id="transactable-security-security-roller-door" value="4754" data-security="">
<label for="transactable-security-security-roller-door">
<i class="icon icon-roller-door"></i> <span class="title">Security Roller-door</span>
</label>
</li>
</ul><!-- checkbox-list dropdown-menu -->
</div>
</fieldset>
</div>
</div>

The problem with your code is that $(" .checkbox-list li input:checked + label") is not depending on the dropdown the handler is invoked on.
Additionally, the first value is not recognized due to the discrepenzie between the click-event of the label and thechange`-event of the input.
I changed your code a bit:
$('.checkbox-list input').on('change', function() {
var $this = $(this).parents('.checkbox-list');
var features_checkedBox = [];
$this.find('input:checked').each(function() {
allChecked = $(this).next('label').html();
features_checkedBox.push(allChecked);
$(this).parents('.dropdown').find('.dropdown-toggle').html('<span class="selections">' + features_checkedBox + '<i class="glyphicon glyphicon-menu-down"> </i> </span>');
});
});
Example
You might want to optimize the example to fit your needs.