Cannot Clear Search Results when entering new search

Im developing a web app that searches lyrics using Music Match Api but im having trouble clearing the div that produces the results when im doing another search. can someone please help me

heres the script

 $(document).ready(function(){
var results = '';

$('#submitButton').on('click',function(){

clearResults(); 
//get the artist name and tghe track name
var artistName = $('#searchArtistName').val();
var songName = $('#searchTrackName').val();
makeRequest(artistName,songName);
e.preventDefault();

});

function makeRequest(artistName,songName){



$.ajax({


url:"https://cors-anywhere.herokuapp.com/https://api.musixmatch.com/ws/1.1/matcher.lyrics.get?q_track="+artistName+"&q_artist="+songName+"&apikey=e87bc35119a5893655c3d0e2c3a4f40b",
type:'Get',
dataType:'json'

}).done(function(response){

//get the response and then append it to the card
var message = response.message.body.lyrics.lyrics_body;

console.log(response);


results += `

<div class="col-md-8">
<div class="card card-custom bg-white border-white z-depth-5" id = "myCard">
<div class="card-body" style="overflow-y: auto">
<i class = "fa fa-book fa-2x text-center"></i>
<h6 class="card-title" style = "font-size:22px;font-family:Comic Sans MS">Album <br>${message}</h6>
</div>
<div class="card-footer" style="background: inherit; border-color: inherit;">
</div>
</div>
</div>
 `;

$('#shower').html(results);

});

}

function clearResults(){

    $("#shower").html('');

}

});

heres a snippet of the html file which has two input fields one for artist name and the other for the song name and a button for submission

<div class = “container”>

<h4>Search to view lyrics</h4>

<input type = “text” id = “searchArtistName” style=“margin-top: 20px;” class = “form-control” placeholder=“Enter Artist Name”>

<input type = “text” id = “searchTrackName” style=“margin-top: 20px;” class = “form-control” placeholder=“Enter Track Name”>

<br>

<button type = “submit” class = “btn btn-info btn-lg” id = “submitButton”>Search</button>

</div>

<div class = “container”>

<div id = “shower” class = “row”></div>

</div>

#jquery #ajax