The idea is I have "Modify" button, that expand <div> with select and checkboxes. Also I have 2 buttons on this <div>: "Update" and "Cancel". I want on "Cancel" press to revert all changes in checkboxes and select to the state, that was when I pressed "Modify".
My <div>:
<div class="accordion_box_inner accordion_box_leding">
.....
@Html.MaterialDropDownRadioListItemFor(x => x.Categories[i].Products[j].AccountUsedFor, values, Constants.OptionLabel,
                            new
                            {
                                @class = "accountUsedForSelection" + (productSelection.Product.IsProductFieldType(ProductType.Mortgage) ? " mortgage-switches" : ""),
                                data_evtname = eventPrefix + "-AccountUsedFor"
                            }, "w-100 mdldropDownWrap")
.....
My button:
@Html.MaterialButton("Cancel", attrs: new{@class = "cancel-product"})
js:
function modifySelectedProduct($items) {
    var $container = $items.closest('.accordion_box_inner');
    var $infoContainer = $container.find('.product-info-container');
...
    $infoContainer.slideDown();
    $container.parent().siblings().hide();
    $container.find('.add-product').removeClass('remove-button').text('update');
    $container.find('.cancel-product').show();
...
function cancelSelectedProduct($items) {
    var $container = $items.closest('.accordion_box_inner');
    var $infoContainer = $container.closest('.accordion_box_inner');
....
    $infoContainer.slideUp();
    $container.parent().siblings().show();
    $infoContainer.closest('.accordion_box_inner').find('.add-product').hide();
    $('.menu_accordion').find('.accordion_item_wrap').show();
....
What I tried:
Modify:
this.savedItem = $.extend(true, {}, $items.closest('.accordion_box_inner'));
Cancel:
var $container = $items.closest('.accordion_box_inner');
$container = this.savedItem;
but the HTML in this.savedItem has changed status.
UPDATED: added code.
P.S. Yes, I tried advices from answers but without result.