Javascript-форум - Повторная обработка события

Приветствую. Какие есть способы повторно реализовать уже отработавшее событие (естественно, без перезагрузки страницы). Нужно, чтобы рыцари били друг друга при каждом клике, а не только 1 раз.
п.с. и еще, параллельно, можно подсказать, как сделать так, чтобы полоска хп уменьшалась каждый раз в зависимости от события, как бы "запоминая" свое предыдущее положение (типа, сначала 100% полоски, после первого клика - 70%, после второго клика - 40% и т.д.). У меня совсем нет идей, как в css задать переменную в кей-фреймах, там только конкретные точки задаются. Можно пропискать отдельные фреймы под количество кликов, НО я не знаю, как через js внедряться в эти кей-фреймы. В общем, сорян если запутал, я обычный новичок, который хочет много, а умеет - мало))

$(".knight")
.click(
    function(){
        $(this).css("animationPlayState","running")
        $(".dmg").css("animationPlayState","running")
    }
)

$(".otherKnight")
.click(
    function(){
        $(this).css("animationPlayState","running")
        $(".dmg3").css("animationPlayState","running")
    }
)

css-код

div.knight{
    width:500px;
    height:500px;
    margin-left:500px;
    background:url("medival2png.png") no-repeat;
    position:absolute;
    animation: test 1s paused;
    cursor: pointer;
}

div.otherKnight{
    width:500px;
    height:300px;
    margin-left:10px;
    background:url("medival3.png") no-repeat;
    animation: test2 1s paused;
    cursor: pointer;
}

div.dmg{
    background-color: green;
    width:105px;
    height:28px;
    margin-left:120px;
    margin-top:30px;
    animation: color 1.2s forwards paused;
    position: absolute;
}

div.dmg2{
    border: 4px solid red;
    width:100px;
    height:20px;
    margin-left:120px;
    margin-top:30px;
    position: absolute;
}


div.dmg3{
    background-color: green;
    width:105px;
    height:28px;
    margin-left:620px;
    margin-top:30px;
    animation: color 1.2s forwards paused;
    position:absolute;
}

div.dmg4{
    border: 4px solid red;
    width:100px;
    height:20px;
    margin-left:620px;
    margin-top:30px;
    position:absolute;
}

@keyframes test{
    0%{margin-left:500px;} 
    50% {margin-left:50px}
    100%{margin-left:500px;}
}

@keyframes color{
    0%{background-color:green;width:105px} 
    50% {background-color:red;}
    100% {background-color:green;width:80px}
}

@keyframes test2{
    0%{margin-left:10px;} 
    50% {margin-left:500px}
    100%{margin-left:10px;}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="knight"></div>
    <div class="otherKnight"></div>
    <div class="dmg"></div>
    <div class="dmg2"></div>
    <div class="dmg3"></div>
    <div class="dmg4"></div>
    <script src="script.js"></script>
</body>
</html>

Картинки также заливаю в нужном порядке (первую назвать medival2png.png, а вторую medival3.png)
https://radikalno.ru/full/2019/11/13...-full.png.html
https://radikalno.ru/full/2019/11/13...-full.png.html