Code Displaying One thing, website displaying another

So here's the code, which should display four blocks.

    <div class="iframe-wrapper" style="display: flex; min-width: 300px; justify-content: center;">
      <iframe id="iframeId" style="border: none; display: block; height: 450px; width: 100%"
        title="Going for the Gold"
        srcdoc="&#60;vega-showcase-widget
        showcase-id=&#34;601ca393-3fa3-48d4-85cb-580be7c38583&#34;
        vega-host=&#34;crf-stella.na4.iiivega.com&#34;
        display-amount=&#34;4&#34;
        max-amount=&#34;12&#34;
        description=&#34;&#34;&#62;
        &#60;/vega-showcase-widget&#62;
        &#60;script type=&#34;text/javascript&#34; defer src=&#34;https://vega-widgets.s3.us-east-2.amazonaws.com/vega-showcase-widget/prod/pendo-showcase-widget.js&#34;&#62;&#60;/script&#62;">
      </iframe>
    </div>

But it only shows one, no matter what I do.

The code has syntax errors, improperly encoded characters. Use the following.

<div class="iframe-wrapper" style="display : flex; min-width : 300px; justify-content : center;">

  <iframe
  
    id="iframeId" style="border : none; display : block; height : 450px; width : 100%;"
    
    title="Going for the Gold"
    
    srcdoc="
    
      <vega-showcase-widget
      
        showcase-id=&quot;601ca393-3fa3-48d4-85cb-580be7c38583&quot;
        
        vega-host=&quot;crf-stella.na4.iiivega.com&quot;
        
        display-amount=&quot;4&quot;
        
        max-amount=&quot;12&quot;
        
        description=&quot;&quot;>
        
        </vega-showcase-widget>
        
      <script type=&quot;text/javascript&quot; defer src=&quot;https://vega-widgets.s3.us-east-2.amazonaws.com/vega-showcase-widget/prod/pendo-showcase-widget.js&quot;>
      
        </script>
        
      ">
      
    </iframe>
  
  </div>

Let us know how it goes.