<div class="container my-sm-4 p-4">
  <div class="row">
    <div class="market-basket col-sm card align-self-center py-4">
      <div class="d-flex justify-content-around">
        <div class="basket-item fruit-apple">🍏</div>
        <div class="fruit-strawberry basket-item">🍓</div>
        <div class="basket-item fruit-lemon">🍋</div>
      </div>
      <div class="vegetable-container d-flex justify-content-around mt-4">
        <div class="vegetable-carrot basket-item">🥕</div>
        <div class="basket-item vegetable-potato">🥔</div>
        <div class="vegetable-brocoli basket-item">🥦</div>
        <div class="basket-item vegetable-onion">🧅</div>
      </div>
    </div>
    <div class="basket-count col-sm ml-2 p-3">
      <h3>Your basket contains:</h3>
      <p class="fruits-count"></p>
      <p class="vegetables-count"></p>
    </div>
  </div>
</div>

div.basket-item {
  font-size: 30px;
}

.market-basket {
  background-color: #bde3cd;
}

.basket-count {
  background-color: #fafafa;
}

const badgeOk = '<span class="badge badge-success ml-2">OK</span>';
const badgeKo = '<span class="badge badge-danger ml-2">KO</span>';

var fruitCount = $('[class^="fruit-"]').length;
$('.fruits-count').html(fruitCount  + " fruits " + badgeKo);
//$('.fruits-count').append('<span class="badge badge-light ml-2">Using ^ selector</span>');
  
var veggieCount = $('[class*="vegetable-"]').length;
$('.vegetables-count').html(veggieCount  + " vegetables " + badgeOk);
//$('.vegetables-count').append('<span class="badge badge-light ml-2">Using * selector</span>');