Styling methods not available on page load, but are after I make an action on the page

I'm trying to write an HTML panel in Grafana.

I have the following code in that panel (a page consists of panels of different types, one such type being HTML):

<html lang="en">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="">
      .input-field.col .dropdown-content [type="checkbox"]+label {
        top: -10px;
      .caret {
        border-color: transparent !important;
    <div class="container">
      <div class="row">
        <div class='input-field col s6'>
          <select class='multiselect' multiple>
            <option value="" disabled selected>Datacenter</option>
            <option value="rs-iad">rs-iad</option>
            <option value="rs-lhr">rs-lhr</option>
            <option value="rs-ord">rs-ord</option>
            <option value="unknown">unknown</option>
    <!-- Latest compiled JavaScript -->
      <script src=""></script>
      <script type="text/javascript">

This is stored in a scripted JS panel (example can be seen here) - When I navigate to this scripted page, I get exceptions at first in the console:

TypeError: $(…).material_select is not a function

But if I click Edit and go to the HTML content for the panel, modify a single character of the HTML, everything magically renders just fine. How can I get around this? I’m not super great at web development in general, so if I’m doing something completely wrong in my HTML content, apologies.

I’ve tried wrapping the material_select() in a $(document).ready(), but this produces the same result.

I know this is a bit specific to Grafana, but I can't seem to get any responses from their official forums yet so hoping someone here can help steer me.