jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://unpkg.com/leader-line@1.0.5/leader-line.min.js"></script>

<div class="start"></div>
<div class="items-list">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>  
</div>

CSS

.start {
    width:50px;
    height:50px;
    background:#0f0;
    margin:100px auto;
    
}
.items-list {
    position: relative;
    margin: 0 auto 5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.item {
    width: calc(25% - 30px);
    height:100px;
    background:#f00;
    margin:40px 15px;
    
}
@media(max-width:768px){
  .item {width: calc(50% - 30px);}
}

JavaScript

const start = document.querySelector('.start');
const items = document.querySelectorAll('.item');


const options = {
    startSockets: [
        'bottom',
        'bottom',
        'bottom',
        'bottom',
    ],
    endSockets: [
        'top',
        'top',
        'top',
        'top',
    ]
};

limit = 4;
if($(window).width() < 768) {
	limit = 2;
}
for (i = 0; i < limit; i++) {
    new LeaderLine(start, items[i], {
        size: 2,
        color: '#BA8E59',
        endPlug: 'behind',
        startSocket: options.startSockets[i],
        endSocket: options.endSockets[i]
    });
}