enter image description hereSo I am trying to use SVG Filters to create rounded clipping paths overs an image.
For this reason here is the html code

<div class="box_parent">
    <div class="box2"></div>

    <svg class="flt_svg" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="flt_tag">
                <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="flt_tag" />
                <feComposite in="SourceGraphic" in2="flt_tag" operator="atop"/>
            </filter>
        </defs>[[enter image description here](https://i.sstatic.net/T15YhtJj.png)](https://i.sstatic.net/niHH5APN.webp)
    </svg>

</div>

and the accompanying CSS for it

@media only screen and (max-width: 600px)
{.box2
{
    width: 100%;
    background-image: url("image1url");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #faebd7;
    clip-path: polygon(0% 0%, 77% 0%, 77% 44%, 100% 44%, 100% 100%, 81% 100%, 81% 72%, 0 73%);
    margin: 0 auto;
}
}
.flt_svg {
    visibility: hidden; 
    position: absolute;
    width: 0px;
    height: 0px;
}

.box_parent
{
    filter: url('#flt_tag');
}

My scenario is, I am going to create multiple of these on a single page but if I duplicate withput changing the class names and only changing IMAGE_URL, both boxes show same image.
If I change the classnames to make it entirely different thing, there is no output

I tried giving different class names to each reference of class names i-e

<div class="3box_parent">
    <div class="box3"></div>

    <svg class="3flt_svg" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="3flt_tag">
                <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="flt_tag" />
                <feComposite in="SourceGraphic" in2="3flt_tag" operator="atop"/>
            </filter>
        </defs>
    </svg>

</div>

and then in the css as this
@media only screen and (max-width: 600px)

{.3box2
{
    width: 100%;
    background-image: url("image2url");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #faebd7;
    clip-path: polygon(0% 0%, 77% 0%, 77% 44%, 100% 44%, 100% 100%, 81% 100%, 81% 72%, 0 73%);
    margin: 0 auto;
}
}
.3flt_svg {
    visibility: hidden; 
    position: absolute;
    width: 0px;
    height: 0px;
}

.3box_parent
{
    filter: url('#3flt_tag');