I've referenced some other questions on here about showing and hiding a Bootstrap Alert on button click, but for some reason my implementation is not working. I am using Bootstrap 4, however, although from my beginner knowledge things should still work correctly.

I've referenced Bootstrap's documentation on dismissing alerts, and I have modified their sample to remove the show class from the alert as I simply want to show the alert upon a button click. The dismissal should work fine as the close button on the alert will be implemented from the HTML.

HTML

<!-- Alert -->

<div class=alert alert-success alert-dismissible fade role=alert id=buttonAlert>

    <strong>Success!</strong> You just showed an alert.

    <button type=button class=close data-dismiss=alert aria-label=Close>

        <span aria-hidden=true>&times;</span>

    </button>

</div>



<!-- Submit Button -->

<div class=form-group>

    <a href=# class=btn btn-primary data-toggle=modal data-target=#ModalCenter id=modalButton>Click me</a>

    </div>

</div>

JavaScript

  $(document).ready(function() {

      $(#modalButton).click(function(){

          // alert(Success!) //Test to see if the function worked, it did

      $(#buttonAlert).show() //Shows Bootstrap alert

      })

  })

So the JavaScript function works as I've tested it with alert(Success!), but the Bootstrap alert line $(#buttonAlert).show() does not show anything?

Note I am brand new to Bootstrap and Javascript/Jquery, I'm just trying to put some sample code together to learn so please bear with me.