Develop Reference

Default Cards Disable or Activated on Click Jquery

I have been trying to use different ways to code this jQuery part, but it's not working. I do have a list of cards with the first one that has a default class. The goal would be that each time I click on the button that says "Set as Default", I could set the class "default" on the parent "bgCreditcard" and disable the button at the same.
My issue is that I tried toggleClass, but it was activating both the cards with the button "set as Default". I tried to disable with prop, but no luck too. Any ideas?
This is my HTML:
<div class="row">
<div class="col-12 colg-md-6 card bgCreditcard active">
<div class="card-body">
<div class="card-text">
<p>Card 1</p>
<button class="bg-btn bg-default bg-btn-disabled" disabled>Default</button>
</div>
</div>
</div>
<div class="col-12 colg-md-6 card bgCreditcard">
<div class="card-body">
<div class="card-text">
<p>Card 2</p>
<button class="bg-btn bg-default bg-btn-default">Set as Default</button>
</div>
</div>
</div>
<div class="col-12 colg-md-6 card bgCreditcard">
<div class="card-body">
<div class="card-text">
<p>Card 3</p>
<button class="bg-btn bg-default bg-btn-default">Set as Default</button>
</div>
</div>
</div>
</div>
Js:
$('.bg-default').click(function(){
$('.bgCreditcard').each(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
});

Consider the following.
$(function() {
function clearDefault(card) {
$(card).removeClass("active");
$("button", card).prop("disabled", false).toggleClass("bg-btn-default bg-btn-disabled").html("Set as Default");
}
function addDefault(card) {
$(card).addClass("active");
$("button", card).prop("disabled", true).addClass("bg-btn-disabled").html("Default");
}
function setDefault(event) {
clearDefault($(".bgCreditcard.active"));
addDefault($(event.target).closest(".bgCreditcard"));
}
$(".bgCreditcard button").click(setDefault);
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-12 colg-md-6 card bgCreditcard active">
<div class="card-body">
<div class="card-text">
<p>Card 1</p>
<button class="bg-btn bg-default bg-btn-disabled" disabled="true">Default</button>
</div>
</div>
</div>
<div class="col-12 colg-md-6 card bgCreditcard">
<div class="card-body">
<div class="card-text">
<p>Card 2</p>
<button class="bg-btn bg-default bg-btn-default">Set as Default</button>
</div>
</div>
</div>
<div class="col-12 colg-md-6 card bgCreditcard">
<div class="card-body">
<div class="card-text">
<p>Card 3</p>
<button class="bg-btn bg-default bg-btn-default">Set as Default</button>
</div>
</div>
</div>
</div>

You can try following code:
HTML:
<div class="row">
<div class="col-12 colg-md-6 card bgCreditcard active">
<div class="card-body">
<div class="card-text">
<p>Card 1</p>
<button class="bg-btn bg-default" disabled>Default</button>
</div>
</div>
</div>
<div class="col-12 colg-md-6 card bgCreditcard">
<div class="card-body">
<div class="card-text">
<p>Card 2</p>
<button class="bg-btn bg-default bg-btn-default">Set as Default</button>
</div>
</div>
</div>
<div class="col-12 colg-md-6 card bgCreditcard">
<div class="card-body">
<div class="card-text">
<p>Card 3</p>
<button class="bg-btn bg-default bg-btn-default">Set as Default</button>
</div>
</div>
</div>
</div>
jQuery:
$(document).on('click', '.bg-btn' ,function(){
$('.bgCreditcard').removeClass('active');
$('.bgCreditcard').find('button').prop('disabled', false)
$('.bgCreditcard').find('button').removeClass('bg-btn-disabled')
$(this).closest('.bgCreditcard').addClass('active');
if($(this).closest('.bgCreditcard').hasClass('active')) {
$(this).prop('disabled', true);
$(this).addClass('bg-btn-disabled')
}
});

How to know the selected card style and pass the value to the backend

I want to get the value in a single card selected by the user and post it to the backend
<div class="card-body">
<div class="swiper-container swipercards">
<div class="swiper-wrapper pb-4">
<div class="swiper-slide ">
<div class="card border-0 bg-default text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Visa</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide ">
<div class="card border-0 bg-warning text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Maestro</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>

Welcome AegisFor. It looks like you're using Swiper.js?
According to the docs, under events, here is how you determine the selected item in the carousel:
const swiper = new Swiper('.swiper', {
// ...
});
swiper.on('slideChange', function () {
console.log('slide changed', swiper.activeIndex);
});
https://swiperjs.com/swiper-api#events
You could get the values by referring to the slide's attributes, like this:
....
<div class="swiper-wrapper pb-4" >
<div class="swiper-slide " id="card-1" data-card-number="12345">
....
When you change slides, refer to the div that matches the activeIndex of the carousel:
var activeCard = document.getElementById("card-" + swiper.activeIndex);
Now you can get the card number:
var cardNumber = activeCard.getAttribute("data-card-number")
How you send it to your backend depends on what backed you have. You might do something similar to this:
fetch('http://example.com/card?card-number=' + cardNumber)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
The documentation at https://swiperjs.com/swiper-api is quite good. Remember to read the docs thoroughly before posting to SO.

choosing and selecting from divs

I have 2 divs like this belonging to different teams. All of them has different names and ids
<div id="joinville">
<div class="gk">
<div id="john">
<img src:xxx ">
<h6 class="namejoinville ">John</h6>
</div>
<div id="jake ">
<img src:xxx">
<h6 class="namejoinville">Jake</h6>
</div>
<div id="allan">
<img src:xxx ">
<h6 class="namejoinville ">Allan</h6>
</div>
</div>
</div>
<div id="thunder ">
<div class="gk ">
<div id="amilcar ">
<img src:xxx">
<h6 class="namethunder">Amilcar</h6>
</div>
<div id="peter">
<img src:xxx ">
<h6 class="namethunder ">Peter</h6>
</div>
<div id="jm ">
<img src:xxx">
<h6 class="namethunder">James</h6>
</div>
</div>
</div>
Them I have this:
<div id="onethree">
<div id="grteam">
<img src="xxx"">
<h6 id="j1">GK</h6>
</div>
I want to whenever I click on one of the player to change the "grteam" div to the one selected.
How can i make this with js?
Sorry, if this is basic stuff but i'm still a begginner

when you click on the player name his data moves to #grteam
document.querySelectorAll('.gk div h6').forEach(player => {
player.addEventListener('click', updateSelectedPlayer, this);
});
function updateSelectedPlayer(player) {
let greatPlayerImg = document.querySelector('#grteam>img'),
greatPlayerName = document.querySelector('#grteam>h6'),
selectedPlayerImg = player.target.parentNode.querySelector('img').src,
selectedPlayerName = player.target.innerHTML;
greatPlayerImg.src = selectedPlayerImg;
greatPlayerName.innerHTML = selectedPlayerName;
}
<div id=Joinville>`
<div class="gk">
<div id="john">
<img src='xxx'>
<h6 class="namejoinville">John</h6>
</div>
<div id="jake">
<img src='xxx'>
<h6 class="namejoinville">Jake</h6>
</div>
<div id="allan">
<img src='xxx'>
<h6 class="namejoinville">Allan</h6>
</div>
</div>
</div>
<div id=Joinville>`
<div class="gk">
<div id="amilcar">
<img src='xxx'>
<h6 class="namethunder">Amilcar</h6>
</div>
<div id="peter">
<img src='xxx'>
<h6 class="namethunder">Peter</h6>
</div>
<div id="jm">
<img src='xxx'>
<h6 class="namethunder">James</h6>
</div>
</div>
</div>
<div id="onethree">
<div id="grteam">
<img src="xxx">
<h6 id="j1">GK</h6>
</div>
</div>

I suggest as a beginner that you get used to using common class names for similar elements
Here I have two class="team" and each team has a group of class="player" and each player has an inner class="player-name"
Note that the id on player elements is irrelevant this way
You can add other classes as well but this helps styling the structure and makes the javascript simpler to traverse these common items
Working example without the images. You can extend this to work with those yourself
const players = document.querySelectorAll('.player')
players.forEach(function(el) {
el.addEventListener('click', function(e) {
// name of selected player
const name = el.querySelector('.player-name').textContent;
// add selected name to grteam
document.querySelector('#j1').textContent = name;
// remove active class from players
players.forEach(function(el) {
el.classList.remove('active')
})
// add active class to selected player
el.classList.add('active')
})
})
#container{display:flex}
.team{flex-basis:50%;padding:.5em}
h6{ font-size: 1em; margin:0}
.player{ border:2px solid #ccc; padding:.5em; margin-bottom:1em}
.player.active{border-color:red}
<div id="grteam">
Active: <strong id="j1">None</strong>
</div>
<div id="container">
<div class="team">
<div class="player">
<h6 class="player-name">John</h6>
</div>
<div class="player">
<h6 class="player-name">Jake</h6>
</div>
<div class="player">
<h6 class="player-name">Allan</h6>
</div>
</div>
<div class="team">
<div class="player">
<h6 class="player-name">Amilcar</h6>
</div>
<div class="player">
<h6 class="player-name">Peter</h6>
</div>
<div class="player">
<h6 class="player-name">James</h6>
</div>
</div>
</div>

Auto Load data with loading spinner when reach 10 article with jquery or javascript

I have an HTML code, And I want to limit the article to 10 and auto load when the scroll is reached the last article, also show loading spinner. It looks like need jquery or javascript to make it works.
I hope that I could make it auto load when reaching 10 articles with loading spinner.
Here is my HTML code :
<div class="container">
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">2</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Ada Lowongan Kerja Terbaru di Kemenkes, Mau?</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">3</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Perhatikan Penampilan Ketika Wawancara Kerja, Ini Tipsnya</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">4</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Berdasarkan Zodiak, Ini Wanita yang Jadi Pasangan Terbaik</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">5</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Generasi Ini Paling Rentan Bertengkar Soal Uang dengan Pasangan</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">6</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Gaya Andalan Syahrini Setelah Berhasil Berbobot 47 Kilogram</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">7</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Parfum Bertahan Seharian? Tidak Sulit dengan 8 Cara Ini</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">8</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Siaran Tanpa Makeup, Newscaster Ini Tuai Pujian</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">9</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Jakarta Buka Kompetisi Balet Internasional Asian Grand Prix</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
<article class="post">
<div class="row lined">
<div class="col-1">
<h1 class="no-padding heading-num">10</h1>
</div>
<div class="col-8 no-side-padding">
<h2>Drone Ikut Berlenggak Lenggok di Panggung Runway Dolce & Gabanna</h2>
<h4>Liputan6.com</h4>
</div>
<div class="col-3 no-side-padding">
<img src="https://fakeimg.pl/80x80/" class="responsive" alt="">
</div>
</div>
</article>
</div>

ContentFlow - div max-width not working

I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php