1. Зачем было оборачивать все еще в 1 функцию
2. Там цикл совсем не нужен внутри другой функции.
3. Можешь использовать style и добавлять туда % нужный в width, если нужны классы можно сделать 4 класса и добавлять их, используя так же счетчик который будет пополняться на 1 после каждого вызова, т.е кликнули 3 раза.
Сначала count = 1 поставили класс element.classList.add('line-active' + count
Вот рабочий пример
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="level">
<div class="line">5%</div>
</div>
<button class="btn"></button>
</body>
</html>
<code lang="css">
.level {
width: 100%;
height: 50px;
background: #eee;
}
.line {
width: 10%;
height: 50px;
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
}
.line.active1 {
transition: 0.3s;
width: 25%;
}
.btn {
width: 10%;
height: 20px;
background: red;
margin-top: 15px;
}
</code>
let levelFull = document.querySelector('.line');
let levelBtn = document.querySelector('.btn');
let startPercent = 5
function progressActive() {
startPercent = startPercent + 25
if (startPercent > 100) startPercent = 100
levelFull.style.width = startPercent + '%'
levelFull.textContent = startPercent + ' %'
}
levelBtn.addEventListener('click', progressActive);
