Ajax/Jquery Population of dropdownlist without accumulating the values from previous results

Question

I have this parent dropdownlist named "dl_empID" and child dropdownlist named "dl_logs". dl_empID is the employee's refID while the dl_logs is the records of attendance. I want to filter the dl_logs based on the dl_empID selected. At first it shows the dl_logs of the selected dl_empID but when I tried to changed the selected dl_empID the dropdownlist won't refresh and shows the pevious result as well, where I specifically only need the dl_logs based on the updated selected dl_empID.

function generateTime(val) {

        var lvItem = $("#<%=dl_logs.ClientID %>");

       lvItem.empty().append('<option selected="selected" value="">Please select</option>');
      

        $.ajax({
            type: "POST",
            url: "HRNoLog.aspx/generateTime",
            data: "{empID: '" + $("#<%=dl_empID.ClientID %>").val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
              //  lvItem.empty()
                $.each(r.d, function () {

                    lvItem.append($("<option></option>").val(this['Value']).text(this['Text']));
                
                 
                });
            }
          

        });
    }

Here's my code, lvItem.empty() stops the accumulation of previous from the current results but it gave me 500 internal error that's why I put it on comment for the mean time.