D3 js filter select

Question

I dont knoe exactly what is going on here tried everything to no success, here is my code, i am trying to add color by changing the opacity with the rgba, but i noticed only the first element of the selected(this) is being given the rgba and the rest turns to rgb, please note am talking about the line of that has the style('fill',`rgba(${red}, ${green}, ${blue}, ${i+1 * 0.25}`)

        currentEl.filter(function(d, i, n):any {
            if(bottonValue==='filter-odd') {
                if(i % 2 === 0) {
                    select(this).style('fill',`rgba(${red}, ${green}, ${blue}, ${i+1 * 0.25}`)
                }
                else {
                    select(this).style('fill','rgba(248, 248, 248, 0.5)')
                }
            }
            else if(bottonValue==='filter-even') {
                if(i % 2 !== 0) {
                    select(this).style('fill',`rgba(${red}, ${green}, ${blue}, ${i+1 * 0.25}`,)
                }
                else {
                    select(this).style('fill','rgba(248, 248, 248, 0.5)')
                }
            }
            else
                select(this).style('fill',`rgba(${red}, ${green}, ${blue}, ${i+1 * 0.25}`)
           
        }) 
    }```

below is my code 


[![dom and result image][1]][1]


  [1]: https://i.stack.imgur.com/BhhtW.jpg

Answer 1

Well i solved with the help from discord, i needed to add (i+1) and not i+1

select(this).style('fill',`rgba(${red}, ${green}, ${blue}, ${(i+1) * 0.25}`,)