Using multiple mix blend modes under a single parent - css

Question

Just for fun I decided to make a progress bar element.. I also wanted to add a circular blob in the progress bar.
var modelList = [
'normal',
'multiply',
'screen',
'overlay',
'darken',
'lighten',
'color-dodge',
'color-burn',
'hard-light',
'soft-light',
'difference',
'exclusion',
'hue',
'saturation',
'color',
'luminosity'
]
let elem =
document.querySelector('.box');
let modelElem =
document.querySelector('.circle');
let progressBar =
document.querySelector('.progress');
let i = 0;
modelElem.innerHTML = modelList[i];
elem.onclick = function(){
if(i+1 < modelList.length) i++;
else i = 0;
progressBar.style.mixBlendMode= modelList[i];
modelElem.innerHTML = modelList[i];
}
* {
box-sizing: border-box;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
cursor: pointer;
1
}
.aaline {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
height: 40px;
width: 80%;
border: 8px solid black;
background: white;
z-index: 2;
}
.circle {
position: absolute;
height: 250px;
width: 250px;
border: 8px solid black;
border-radius: 50%;
background: white;
text-align: center;
font-size: 3rem;
z-index: 1;
}
.circle:first-of-type {
mix-blend-mode: lighten;
}
.progress {
position: absolute;
width: 20%;
height: 250px;
background: brown;
left: 0;
}
<div class="box">
<div class="aaline">
<div class="circle">
There.. There..
</div>
<div class="progress"></div>
</div>
<div class="circle"></div>
</div>
Adding mix blend mode to progress bar so that it blends in nicely with the aaline is the problem. I don't know why, but it is not blending.
Edit: toggling blends js