I have the following UI:

[![enter image description here](https://i.stack.imgur.com/dsVTJ.png)](https://i.stack.imgur.com/dsVTJ.png)

and from there I need to change dynamically the button `Archive` and `Unarchive` as well as the icon from FontAwesome depending on the action taken and the response from the backend. The response basically looks like:

```
{"row_id":"12518","status":true}

```

In a few words:

* In the blue row (archived item): if I click on `Unarchive` button and the response is `true` I should: remove the background color, change the button text to `Archive`, change the button class from `unarchive-form` to `archive-form` and change the FontAwesome icon class from `fa fa-arrow-circle-up` to `fa fa-arrow-circle-down`.
* In the other row (non archived item): if I click on `Archive` and the response is `true` then I should: add the blue background, change the button text to `Unarchive`, change the button class from `archive-form` to `unarchive-form` and change the FontAwesome icon class from `fa fa-arrow-circle-down` to `fa fa-arrow-circle-up`.

I have almost everything covered (and I will show the sources for just one case since it's pretty much the same and I don't want to make a big post):

```
$.ajax({
    url: '/ajax/forms/archive',
    type: 'POST',
    dataType: 'json',
    data: {
        form_id: ids
    }
}).done(function (response) {
    $.each(response, function (index, value) {
        var this_row_tr = $('input[data-form=' + value.row_id + ']').closest('tr'),
            this_btn = this_row_tr.find('.archive-form');

        if (value.status === true) {
            // here I add the background color to the TR 
            this_row_tr.addClass('info');
            // here I swap the button class 
            this_btn.removeClass('archive-form').addClass('unarchive-form');
            // here I swap the button text and also the whole FontAwesome part
            this_btn.text('<i class="fa fa-arrow-circle-up" aria-hidden="true"></i> Unarchive');
        } else if (value.status === false) {
            this_row_tr.addClass('error');
            all_archived = false;
        }
    });

    if (all_archived) {
        toastr["success"]("The forms were archived successfully.", "Information");
    } else {
        toastr["error"]("Something went wrong, the forms could not be archived.", "Error");
    }
}).error(function (response) {
    console.log(response);
    toastr["error"]("Something went wrong, the forms could not be archived.", "Error");
});

```

But the problem comes when I change the text for the FontAwesome since I get the plain text instead of the icon. For example clicking on `Unarchive` in the first row will become into this:

[![enter image description here](https://i.stack.imgur.com/Eb5Oz.png)](https://i.stack.imgur.com/Eb5Oz.png)

As you can see there everything is fine but the FontAwesome icon. Is there any way to refresh the button so the changes takes effect? Or do you know any other way to achieve this?