Js array elements top and untop array elements return to their original position

window.products = [{
        msg: "1",
        publicPreson: "",
        phone: "13811209509",
        checkOut: "21",
        isState: "",
        releaseTime: "2018-05-02 13:14",
        creationTime: "2018-05-02 13:14",
        onClick: ["", "", "", ""],
        isTop:false,
        isShow:true
    }, {
        msg: "2",
        publicPreson: "",
        phone: "13811209509",
        checkOut: "31",
        isState: "",
        releaseTime: "2018-05-02 13:14",
        creationTime: "2018-05-02 13:14",
        isTop:false,
        isShow:true
    }, {
        msg: "3",
        publicPreson: "",
        phone: "13811209509",
        checkOut: "41",
        isState: "",
        releaseTime: "2018-05-02 13:14",
        creationTime: "2018-05-02 13:14",
        isTop:false,
        isShow:true
    }, {
        msg: "4",
        publicPreson: "",
        phone: "13811209509",
        checkOut: "51",
        isState: "",
        releaseTime: "2018-05-02 13:14",
        creationTime: "2018-05-02 13:14",
        isTop:false,
        isShow:true
    }, {
        msg: "5",
        publicPreson: "",
        phone: "13811209509",
        checkOut: "121",
        isState: "",
        releaseTime: "2018-05-02 13:14",
        creationTime: "2018-05-02 13:14",
        isTop:false,
        isShow:true
    }];
    var initListObj = {};
    initListObj.list = products;

    render("dynamic_management", initListObj, "-sharptableCon");

html:
<tbody>

                    {{each list as value index}}
                    {{if value.isShow === true}}
                    <tr data-index="{{index}}">
                        <td>{{index+1}}</td>
                        <td>{{value.msg}}</td>
                        <td>{{value.publicPreson}}</td>
                        <td>{{value.phone}}</td>
                        <td>{{value.checkOut}}</td>
                        <td>{{value.isState}}</td>
                        <td>{{value.releaseTime}}</td>
                        <td>{{value.creationTime}}</td>
                        <td>
                            <span class="checkOut" onclick="checkOut({{index}})"></span> |
                            <span class="del" onclick="delThis({{index}})"></span> |
                            <span class="edit" onclick="editCon({{index}})"></span> |
                            {{if value.isTop === false}}
                            <span class="setTop" onclick="setTop(this,{{index}})"></span>
                            {{else}}
                            <span class="setTop" onclick="cancelTop(this,{{index}})"></span>
                            {{/if}}
                        </td>
                    </tr>
                    {{/if}}
                    {{/each}}

                </tbody>
// 
function setTop(obj,index) {
    var setTopObj = products[index];
    setTopObj.isTop = true;
    
    products.unshift(setTopObj);
    products.splice(index+1,1);
    console.log(products);
    var initListObj = {};
    initListObj.list = products;

    render("dynamic_management", initListObj, "-sharptableCon");
}

function cancelTopTop(obj,index) {
    
    var initListObj = {};
    initListObj.list = products;

    render("dynamic_management", initListObj, "-sharptableCon");
}

when we click on the top of a row, move the changed object to the first one in the array by manipulating the array, and move the row to the top of the table. When we click to unset the top, let the object return to the original array sort. What should we do? now I can"t get the original position of the array object. Please advise us.

Mar.11,2021

just save the index in setTop. The index saved in cancelTopTop is the original location

.
Menu