Some SVG elements disappear when hiding adjacent divs

Question

I have a project where I've created a number of divs which each contain an svg gauge. Each gauge is multi-layered and when displayed, it looks great. Its a complex gauge, so I wont include the code, but the structure is:

`    <div>  (filtered at this level with css display)
      <svg>
        <defs>
        </defs>
        <g>
        </g> (multiple g tags)
      </svg>
    </div>`

I use jQuery and a dropdown to filter the view where I literally only change the div from "display:inline-block" to "display:none". The divs which are meant to be hidden are, but the showing divs with their child svgs are missing layers (entire g tags). When I change the filter setting back to all of them, the layers return. As you can see in the code, its very simple and the un-filter (id = -1) results in the same condition as the shown divs in a filtered view.

`   function filterCell(id) {
    $('.theseGauges').each(function () {
        let filteredList = CellM.filter(a => a.cellNameId == id);
        if (parseInt(id) == -1) {
            $(this).css({ 'display': "inline-block" });
        } else {          
            let a = filteredList.findIndex(b => b.machineId == $(this).attr("mid"));
            if (a != -1) {
                $(this).css({ 'display': "inline-block" });
            } else {
                $(this).css({ 'display': 'none' });
            }
        }
      })  
    }`

To add to the strangeness, I also have the ability to filter these gauges by location. This works perfectly in a filtered and unfiltered state (in this case, thisOption == 1 is all locations).

`    $('#filterMachineLocation').change(function (e) {
        let thisOption = $(this).val();
        $('.theseGauges').each(function () {
            if (parseInt(thisOption) == 1) {
                $(this).css({ 'display': "inline-block" });
            } else if (parseInt($(this).attr('loc')) != thisOption) {
                $(this).css({ 'display': 'none' });
            } else {
                $(this).css({ 'display': "inline-block" });
            }
        });`

I've tried this with the same result in Chrome and Edge. I opened the dev tools and copied the div HTML in both the complete and incomplete states and ran it through WinMerge. They are the same.

Any ideas are appreciated

Answer 1

@enxaneta was right on with the answer. The real problem was that I was loading the defs into each svg and creating duplicate id's for my gradients. It didn't work the first time because I was still iterating and making duplicate ids. Thanks for your help!