Why My Insertbefore() Only Adding 1 Element?

I have a function that when the button clicked, the card is showing after the 1st card. But when I am clicking again the button it is not working and there is no error showing in c

Solution 1:

You only ever created one .card-single element, in $budget - whenever the button is clicked, the single element will be inserted to the new location and removed from its previous location if there is any. Create the element inside the handler instead.

$('.add-budget').on('click', function() {

  var $budget = $('<div class="card-single"> <div class="card-body"> <span class="fas fa-coins"></span> <div> <h5>{{ date_posted }}</h5> <h4>$30,659.45</h4> </div> </div> <div class="card-footer"> <a href="">Add Expenses</a> </div> </div>')
  $budget.insertBefore('.card-single:last');
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><main><divclass="head"><h2class="dash-title">Budgets</h2><buttonclass="add-budget">Add Budget</button></div><divclass="dash-cards"><divclass="card-single"><divclass="card-body"><spanclass="fas fa-coins"></span><div><h5>{{ date_posted }}</h5><h4>$30,659.45</h4></div></div><divclass="card-footer"><ahref="">Add Expenses</a></div></div></div></main>