Dropdown não aparece em table

estou criando um layout para uma empresa e preciso que quando clieque no check de SIM abra uma table e dentro dessa table tenha um dropdown, a parte do check está funcionando mas quando seleciono ele, aparece só a table sem o dropdown

            <h4 style="color:rgba(0,33,77);"class="mt-4 text-center">enviar layout?</h4>
            <hr style="height:2px; border:none; color:#000; background-color:rgba(0,33,77); margin-top: 0px; margin-bottom: 0px;">
            <div class="d-flex justify-content-center mt-2">
              <div class="form-check form-check-inline">
                <input id="layoutCheck1" class="form-check-input" type="radio" name="inlineRadioOptions"  value="option1">SIM
              </div>
              <div class="form-check form-check-inline">
                <input id="layoutCheck2" class="form-check-input" type="radio" name="inlineRadioOptions"  value="option2">NÃO (CONFORME PEDIDO ANTERIOR)
              </div>
            </div>

            </span>

            <div id="palco">
              <div id="option1">
                <table class="table table-striped text-center">
                  <thead>
                    <tr>
                      <th scope="col">referencia</th>
                      <th scope="col">personalização</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row">#########</th>
                      <td>
                        <div class="dropdown">
                          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  Dropdown button
                          </button>
                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div> 

e o js que estou usando para fazer o check

      function id( el ){
        return document.getElementById( el );
      }
      function mostra( el ){
              id( el ).style.display = 'block';
      }
      function esconde_todos( el, tagName ){
              var tags = el.getElementsByTagName( tagName );
              for( var i=0; i<tags.length; i++ )
              {
                      tags[i].style.display = 'none';
              }
      }
      window.onload = function()
      {
              id('option1').style.display = 'none';

              id('layoutCheck1').onchange = function()
              {
                      esconde_todos( id('palco'), 'div' );
                      mostra( this.value );
              }
              var radios = document.getElementsByTagName('input');
              for( var i=0; i<radios.length; i++ ){
                      if( radios[i].type=='radio' )
                      {
                              radios[i].onclick = function(){
                                      esconde_todos( id('palco'), 'div' );
                                      mostra( this.value );
                              }
                      }
              }
      }