binding element to FeatherLight JS Lightbox

Question

Evidently I'm having a problem binding to a Lightbox from featherLight js. Here is my code:

  $(document).on("click", "#plate_preview_btn", function() {
    $.featherlight('#previewCompleteContainer', {});
  });

From my understanding in the above code I'm binding to the document. So anything added dynamically after should bind to right?

The above code produces a Lightbox appearing after I click on #plate_preview_btn.

I have then both in code and in the console ran the following: To clarify the code below needs to run while the Lightbox is on the screen not BEFORE because this is just an example the css, width would be added with a dynamic value that I can only set after the Lightbox is on the screen.

$('#img_preview_text_container').css("width", '300px');

The div in the Lightbox doesn't add the width: 300px; If I close the Lightbox and click it again then it does add it. From my research this is because of the binding. I don't understand why thou if the above code should work from what I've read. Also tried binding featherlight directly to the button and that didn't work either:

$("#plate_preview_btn")..featherlight(....)

Any idea what I'm doing wrong?

EDIT: Adding html code:

<div class="impact_image_section">
    <button class="action_button" id="plate_preview_btn">preview</button
</div>

<div id="previewCompleteContainer" >
        <img src="https://citylocs.com/apps/preview/img/Texas-Classic-License-Plate-Preview.jpg" alt="" id="preview_image_img">
        <div id="img_preview_text_container" style="position: absolute; top: 120px; left: 56px;">
            <div id="img_preview_text" style="color: #000000;"></div>
        </div>
        </div>

Answer 1

This ended up working for me:

  $(document).on("click", "#plate_preview_btn", function() {
    $.featherlight('#previewCompleteContainer', {});

    $.featherlight.defaults.afterOpen = function(){
    var flc = $(".featherlight-content");
    var previewBox = flc.find('#img_preview_text_container');
    previewBox.css('width', '400px');
};
  });

Answer 2

Your code seems to be working fine. See this example:

$(document).on("click", "#plate_preview_btn", function() {
  $.featherlight('#previewCompleteContainer', {});
});

$('#img_preview_text_container').css("width", '300px');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js"></script>

<div class="impact_image_section">
  <button class="action_button" id="plate_preview_btn">preview</button>
</div>

<div id="previewCompleteContainer">
  <img src="https://citylocs.com/apps/preview/img/Texas-Classic-License-Plate-Preview.jpg" alt="" id="preview_image_img">
  <div id="img_preview_text_container" style="position: absolute; top: 120px; left: 56px;">
    <div id="img_preview_text" style="color: #000000;"></div>
  </div>
</div>