$.ajax({
        type: "GET",
        url: targetUrl,
        success: getBeers,
        error: "error get beers"
    });

    // Function to get all beers via BeerRestController , create a div for each
    // and append it to div container in allBeersOld.html
    function getBeers(beers) {
        $("#container").empty();
        let allBeers = Object.values(beers);
        console.log(allBeers);
        let beerArrSize = beers.length;

        for (var i = 0; i < allBeers.length; i++) {
            let beer = allBeers[i];
            let beerPic = beer.beerPicture;

            if (beerPic === null || beerPic === "") {
                beerPic = beerDefaultImage;
            }


            let beerObj = ` <div class="col-lg-4 col-md-4 mb-4" id="beer-card">
            <div onclick="location.href'#';" class="card h-100" style="cursor: pointer">
            <img class="card-img-top" src="data:image/jpeg;charset=utf-8;base64,` + beerPic + `"  height="350px"  value="${allBeers[i].beerId}" />

              <div class="card-header text-center">
              <button value="${allBeers[i].beerId}" id="btn-del-beer" type="button" class="btn btn-danger" style="padding-inline: 60px">DELETE</button>
              </div>


              <div class="card-body" style="background: rgba(255,252,85,0.21)">
                <h4 class="card-title">${beer.beerName}</h4>
                <label for ="style">Style: </label>
                <span id="style"><b>${beer.style.name}</b></span>
                <br>
                <label for ="style">Brewery: </label>
                <span id="brewery"><b>${beer.brewery.name}</b></span>
                <br>
                <label for ="abv">Alcohol by volume: </label>
                <span id="abv"><b>${beer.abv}</b></span>
                <br>
                 <label for ="avgRate">Average rating: </label>
                <span id="avgRate"><b>${beer.averageRating}</b></span>
                <br>
                 <label for ="card-text">Description: </label>
                 <p class="card-text">${beer.description}</p>
              </div>
              <div id = "footer" class="card-footer">

            <button id="wishBtn" type="button" class="btn btn-outline-danger"
              title="Add to wishlist" value="${beer.beerId}">
              <i class="fas fa-heart" aria-hidden="true"></i>
            </button>
            <button id="drankBtn" type="button" class="btn btn-outline-warning"
              title="Mark as drank" value="${beer.beerId}">
              <i class="fa fa-beer" aria-hidden="true"></i>
            </button>
             </div>
            </div>
          </div>`;


            $("#container").append(beerObj);
        }

    }