We Keep Coding

jQuery sort cards with up/down arrows

I am using Bootstrap cards on a page, where I want those cards to be sorted using up and down arrows. Every card has arrows in its header, to move it up or down in the layout. But of course, when it gets moved to the top, the up arrow should be gone, likewise for when it hits the bottom.
I've tried using if statements in this style:
// Result: Is never executed.
if(!$(card).find('.sort-down')) {}
// Result: Is always executed.
if($(card).not(':has(.sort-down)') {}
Where $(card) is the div containing the complete card that is being moved.
For example, my complete "move down" code block.
$(document).on('click', '.sort-down', function(e) {
e.preventDefault();
let card = $(this).closest('.card');
let sort_id = $(card).attr('data-sort');
let next_sort_id = Number(sort_id) + 1;
$('[data-sort]').each(function(index, value) {
if($(value).attr('data-sort') == next_sort_id) {
$(value).after($(card));
$(value).attr('data-sort', sort_id);
$(card).attr('data-sort', next_sort_id);
// Change buttons
if($(card).attr('data-sort') == sortCount - 1) {
$(card).find('.sort-down').remove();
if(!$(card).find('.sort-up')) {
// Insert up arrow
}
} else {
if(!$(card).find('.sort-up')) {
// Insert up arrow
}
if(!$(card).find('.sort-down')) {
// Insert down arrow
}
}
if($(value).attr('data-sort') == 0) {
$(value).find('.sort-up').remove();
if(!$(value).find('.sort-down')) {
// Insert down arrow
}
} else {
if(!$(value).find('.sort-down')) {
// Insert down arrow
}
if(!$(value).find('.sort-up')) {
// Insert up arrow
}
}
return false;
}
});
});
A little bit of the HTML so you can get an idea what classes/attributes my jQuery is selecting.
<div class="card mb-3" data-sort="0">
<div class="card-header">
Tekstveld
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i data-feather="arrow-down" width="16" height="16"></i></button>
</div>
<div class="card-body p-0">
<div id="editor"></div>
</div>
</div>
As I usually overcomplicate things, and get the result of it not even working, I'm hoping you could help me with either a simple or more advanced working solution of getting this done.

Using data-sort attribute as a sorting index could be more useful for "Global" sorting or filtering. Like when we click on one button to sort them all based on that property value.
But here, a less complicated alternative is to use jQuery default methods like : next(),prev(),closest(),insertAfter(),insertBefore()
$( document ).ready(function() {
setButtons();
$(document).on('click', '.sort-down', function(e) {
var cCard = $(this).closest('.card');
var tCard = cCard.next('.card');
cCard.insertAfter(tCard);
setButtons();
resetSort();
});
$(document).on('click', '.sort-up', function(e) {
var cCard = $(this).closest('.card');
var tCard = cCard.prev('.card');
cCard.insertBefore(tCard);
setButtons();
resetSort();
});
function resetSort(){
var i=0;
$('.card').each(function(){
//$(this).data('sort',i);
$(this).attr("data-sort", i);
i++;
});
}
function setButtons(){
$('button').show();
$('.card:first-child button.sort-up').hide();
$('.card:last-child button.sort-down').hide();
}
function resetSort(){
var i=0;
$('.card').each(function(){
//$(this).data('sort',i);
$(this).attr("data-sort", i);
i++;
});
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="card mb-3" data-sort="0">
<div class="card-header">
Tekstveld
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i class="fas fa-caret-down"></i></button>
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i class="fas fa-caret-up"></i></button>
</div>
<div class="card-body p-0">
<div class="editor"></div>
</div>
</div>
<div class="card mb-3" data-sort="1">
<div class="card-header">
Voorbeeld
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i class="fas fa-caret-down"></i></button>
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i class="fas fa-caret-up"></i></button>
</div>
<div class="card-body p-0">
<div class="editor"></div>
</div>
</div>
<div class="card mb-3" data-sort="2">
<div class="card-header">
Lorem ipsum
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i class="fas fa-caret-down"></i></button>
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i class="fas fa-caret-up"></i></button>
</div>
<div class="card-body p-0">
<div class="editor"></div>
</div>
</div>
</div>
[UPDATE] : The setButtons() function would hide the non functional buttons when the div reach the limit.
Notice that I added another function resetSort() to reorder those data-sort values. Just in case, you need it for global sorting.

I want to dynamically create a tag by using javascript

I'm using a bootstrap modal.
The Function what I want to dynamically create a button at body tag when I click the modal button.
Description about function what I apply: As soon as I click the bluebutton, I want to create it at the body tag('beside the '+' button')
window.onlaod = function(){
var blue = document.getElementById('blue');
blue.onclick = function(){
blue.onclick = null;
var result = document.getElementById('result');
var newblue = document.createElement('span');
newblue.id = 'newblue';
newblue.innerHTML += '<button type="button" class="btn btn-primary btnWH " id="blue"></button>';
result.appendChild(newblue);
};
};
-> This is the code about event after click the bluebutton.
<!-- label color -->
<div class="modal-body">
<button type="button" class="btn btn-primary btnWH " id="blue"></button>
</div>
-> This is the code about bluebutton.
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<div id="result">
<span id="first">
<button type="button" class="btn btn-primary plusbtn" data-toggle="modal" data-target="#mymodal"> +
</button>
</span>
</div>
</div>
</div>
-> This is the code about '+'button.

This will create a button when click on add button inside div id of result code as follows:
<html>
<body>
<button type="button" id="blue">add</button>
<div id="result"></div>
<script>
window.onload = function() {
return addEvent();
}
function addEvent() {
var blueButton = document.getElementById('blue');
blueButton.addEventListener("click", addButton)
}
function addButton() {
var result = document.getElementById('result');
var newBtn = document.createElement('span');
newBtn.id = 'newblue';
newBtn.innerHTML += '<button type="button" id="blue">test</button>';
result.appendChild(newBtn);
}
</script>
</body>
</html>

Toggle button state via jQuery

I have two buttons like (thumbs up) and unlike (thumbs down). Clicking on one button should toggle the state of both, only one being active.
Here is what I have attempted so far:
<button type="button" class="bout unlike bthumb boutontagthumbdown" id="unlike_'.$row['tag_number_id'].'" value="unlike">
<i class="fas fa-thumbs-down fa-lg"></i>
</button>'
<button type="button" class="bout like bthumb boutontagthumbup" id="like_'.$row['tag_number_id'].'" value="like">
<i class="fas fa-thumbs-up fa-lg"></i>
</button>
<script type="text/javascript">
$(function(){
console.log( "ready!" );
$(".bout").click(function(){
var Id = this.id;
var Idunlike = ("#" + Id + ".bout.unlike");
var Idlike = ("#" + Id + ".bout.like");
if ( $(this).attr("value") == 'unlike' ){
$(Idunlike).toggleClass("boutontagthumbdownclic");
$(Idlike).addClass("boutontagthumbupclicreturn");
console.log(Idunlike);
} else if ( $(this).attr("value") == 'like' ) {
$(Idlike).toggleClass("boutontagthumbupclic");
$(Idunlike).addClass("boutontagthumbdownclicreturn");
console.log(Idlike);
}
});
});
</script>

try this
$(function(){
$(".bout").click(function(){
var id = $(this).attr('id').split('_')[1];
switch($(this).attr('value')){
case 'like' :
$('#like_'+id).addClass('boutontagthumbupclic').removeClass('boutontagthumbupclicreturn');
$('#unlike_'+id).addClass('boutontagthumbdownclicreturn').removeClass('boutontagthumbdownclic');
break;
case 'unlike' :
$('#like_'+id).addClass('boutontagthumbupclicreturn').removeClass('boutontagthumbupclic');
$('#unlike_'+id).addClass('boutontagthumbdownclic').removeClass('boutontagthumbdownclicreturn');
break;
}
});
});
.boutontagthumbupclic{color:green;}
.boutontagthumbdownclic{color:red;}
.boutontagthumbdownclicreturn,
.boutontagthumbupclicreturn{color:#555;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" class="bout unlike bthumb boutontagthumbdown" id="unlike_1" value="unlike"><i class="fa fa-thumbs-down fa-lg"></i></button>
<button type="button" class="bout like bthumb boutontagthumbup" id="like_1" value="like"><i class="fa fa-thumbs-up fa-lg"></i></button>

The following should work:
$(function(){
$(".status button").click(function () {
$(".status").find(".active").removeClass("active");
$(this).addClass("active");
})
});
HTML:
<div class="status">
<button type="button" class="like" value="like">
<i class="fas fa-thumbs-up fa-lg"></i>
</button>'
<button type="button" class="unlike" value="like">
<i class="fas fa-thumbs-down fa-lg"></i>
</button>'
</div>
CSS:
.like i, .unlike i {
color: gray
}
.like.active i {
color: green;
}
.unlike.active i {
color: red;
}

Change class on span tag onClick inside Button tag

<button class="btn btn-primary" onclick="wavesurfer.playPause()" type="button">
<span class="glyphicon glyphicon-play"></span></button>
When I press this button I want the span class to change:
From: class="glyphicon glyphicon-play"
To: class="glyphicon glyphicon-pause"
http://jsfiddle.net/fnfNm/35/ Ive looked att this example but it doesnt have a class before it changes.
Please give me jsfiddle example.

I solved it like this:
HTML
<button class="btn btn-primary playPauseBtn" onclick="myFunction()" type="button">
<span id="playPauseSpanId" class="glyphicon glyphicon-play"></span>
</button>
Javascript
function myFunction(){
wavesurfer.playPause();
if(wavesurfer.isPlaying() == true){
document.getElementById("playPauseSpanId").className ="glyphicon glyphicon-pause"
}else {
document.getElementById("playPauseSpanId").className ="glyphicon glyphicon-play"
}
}

Here small algorithm for change class.
var playPauseBtn = document.querySelector('.playPauseBtn');
if(playPauseBtn){
var span = document.querySelector('.playPauseBtn .glyphicon');
playPauseBtn.addEventListener('click', function(){
if (span) {
if (span.classList.contains('glyphicon-play')) {
span.classList.remove('glyphicon-play');
span.classList.add('glyphicon-pause');
} else {
span.classList.remove('glyphicon-pause');
span.classList.add('glyphicon-play');
}
}
},false);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary playPauseBtn" onclick="wavesurfer.playPause()" type="button">
<span class="glyphicon glyphicon-play"></span>
</button>

Using Javascript DOM manipulation to add html elements to div

I am trying to replicate the following HTML code by using only Javascript (no jQuery).
I want the buttons to appear as a group,but it looks like they are being appended individually.
I've read up on bootstrap button groups (http://getbootstrap.com/components/#btn-groups) and the btn-group classs is being called on the html. So therefore my javascript DOM manipulation is incorrect.
Can someone help me to understand why my buttons are not appearing correctly? Please note that this is only a snippet of the entire code. the HTML elements are nested in a "row" div and "container" div.
HTML
<div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Javascript
var divTwo = document.createElement('div');
row.appendChild(divTwo);
col.appendChild(divTwo);
var btnGroupFour = document.createElement('div');
btnGroupFour.className = 'btn-group btn-group-lg';
divTwo.appendChild(btnGroupFour);
var btnLeft = document.createElement('button');
var textLeft = document.createTextNode('Left');
btnLeft.appendChild(textLeft);
btnLeft.className = 'btn btn-default';
var btnMiddle = document.createElement('button');
var textMiddle = document.createTextNode('Middle');
btnMiddle.appendChild(textMiddle);
btnMiddle.className = 'btn btn-default';
var btnRight = document.createElement('button');
var textRight = document.createTextNode('Right');
btnRight.appendChild(textRight);
btnRight.className = 'btn btn-default';
btnGroupFour.appendChild(btnLeft);
btnGroupFour.appendChild(btnMiddle);
btnGroupFour.appendChild(btnRight);
jsfiddle link:
https://jsfiddle.net/bchang89/eh7uhs43/2/

You can use cloneNode() on the parent element .btn-group and set it to a deep copy. Deep copy will create a copy of the target node as well as it's descendants. The only limitation is that it will not copy any event listeners added to either the target node or it's descendants.
// Collect all .btn-group into a NodeList (btnGrp)
var btnGrp = document.querySelectorAll('.btn-group');
// Determine the last .btn-grp by using the .length property -1
var lastGrp = btnGrp.length - 1;
// Reference the index in the btnGrp NodeList
var tgt = btnGrp[lastGrp];
// Create a clone of tgt and set the parameter to true for deep copy
var dupe = tgt.cloneNode(true);
// Append the clone to the body or any other element you wish.
document.body.appendChild(dupe);
EDIT
// Appendinding to `.container` since it looks better and makes more sense.
var box = document.querySelector('.container');
box.appendChild(dupe);
Fiddle
Snippet
var box = document.querySelector('.container');
var btnGrp = document.querySelectorAll('.btn-group');
var lastGrp = btnGrp.length - 1;
var tgt = btnGrp[lastGrp];
var dupe = tgt.cloneNode(true);
box.appendChild(dupe);
.btn-default {
color: #007aff;
background-color: #fff;
border-color: #007aff;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
color: #fff;
background-color: #007aff;
border-color: #007aff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div>
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">8</button>
</div>
</div>
<hr>
<div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
</div>