Issues with Show/Hide Javascript function

Question

I am praying someone can help me with a Show/Hide JavaScript function.

I am building a tool for a website which has an image of a house and buttons to change the colours of the doors, windows etc.

The problem i am having is that when a button is pressed to change the colour of the door, window etc there is a flash of white from the background image.

The original image has white doors, windows etc so my js function loops through the door alpha images (divs) on a button press and changes to the appropriate div with the selected colour but flashes the original base image (div) of the white door in between.

I need to get rid of this white flash so the colours change nicely.

P.s. Once I have pressed all the buttons and changed all the colours the white background is not flashing anymore. So my issue is connected with memory?

D1 D2 D3 D4 D5 D6 D7 D8 D9 D10 D11 D12 D13

let Buttons = document.querySelectorAll(".selectSection-door button");
for (let button of Buttons) {
  button.addEventListener('click', (e) => {
    const et = e.target;
    const active = document.querySelector(".active");


    if (active) {
      active.classList.remove("active");
    }

    et.classList.add("active");

    let allContent = document.querySelectorAll('.content-door');

    for (let content of allContent) {

      if (content.getAttribute('data-t') === button.getAttribute('data-t')) {
        content.style.display = "block";
      } else {
        content.style.display = "none";
      }
    }
  });
}

.outer {
  margin: 100px;
}

.tool-image-container {
  border: 20px solid #969696;
  height: 700px;
  width: 933px;
  position: relative;
  margin: 0;
}

.base {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 1;
}

.alpha {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 1;
  z-index: 9;
  height: 700px;
  width: 933px;
}

.content-door {
  display: none;
}

<div class="tool-image-container">

  <div class="base-div">
    <img src="base.png" class="base">
  </div>



  <div class="contentSection-door">
    <div class="content-door" data-t="13"><img src="images/door/d13.png" class="alpha"></div>
    <div class="content-door" data-t="12"><img src="images/door/d12.png" class="alpha"></div>
    <div class="content-door" data-t="11"><img src="images/door/d11.png" class="alpha"></div>
    <div class="content-door" data-t="10"><img src="images/door/d10.png" class="alpha"></div>
    <div class="content-door" data-t="9"><img src="images/door/d9.png" class="alpha"></div>
    <div class="content-door" data-t="8"><img src="images/door/d8.png" class="alpha"></div>
    <div class="content-door" data-t="7"><img src="images/door/d7.png" class="alpha"></div>
    <div class="content-door" data-t="6"><img src="images/door/d6.png" class="alpha"></div>
    <div class="content-door" data-t="5"><img src="images/door/d5.png" class="alpha"></div>
    <div class="content-door" data-t="4"><img src="images/door/d4.png" class="alpha"></div>
    <div class="content-door" data-t="3"><img src="images/door/d3.png" class="alpha"></div>
    <div class="content-door" data-t="2"><img src="images/door/d2.png" class="alpha"></div>
    <div class="content-door" data-t="1"><img src="images/door/d1.png" class="alpha"></div>
  </div>

  <div class="selectSection-door">
    <button type="button" data-t="1">D1</button>
    <button type="button" data-t="2">D2</button>
    <button type="button" data-t="3">D3</button>
    <button type="button" data-t="4">D4</button>
    <button type="button" data-t="5">D5</button>
    <button type="button" data-t="6">D6</button>
    <button type="button" data-t="7">D7</button>
    <button type="button" data-t="8">D8</button>
    <button type="button" data-t="9">D9</button>
    <button type="button" data-t="10">D10</button>
    <button type="button" data-t="11">D11</button>
    <button type="button" data-t="12">D12</button>
    <button type="button" data-t="13">D13</button>
  </div>


</div>