JSFiddle - React, Tailwind, and code Playground

HTML

<div>       
    <div class="row block-content-more">
            <div  id="l" class="col-md-9 ">
                <h4> Need more info? </h4>
                <hr>
                <div class="" id="thanks">
                    <a href="#contact" data-toggle="modal"><button class="btn btn-small btn-primary" ><span class="glyphicon glyphicon-envelope"></span> Contact the Photographer</button></a>
                    </br>
                </div>
            </div>
        </div>          
    </div>
        
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    
    <div class="modal fade" id="contact" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <form class="form-horizontal" role="form" id="contact" name="contact" >
                    <div class="modal-header">
                            <h4>Send a message to {{ $user->username }}<h4>
                    </div>
                    <div class="modal-body">
                            <div class="form-group">
                                    <label for="contact-name" class="col-sm-2 control-label">Some tips:</label>
                                <div class="col-sm-10">
                                    <div class="full-field-block row-space-2">
                                        <ul>
                                          <li>
                                            Do you like potatoes?
                                          </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                    <label for="contact-message" class="col-sm-2 control-label">Message</label>
                                    <div class="col-sm-10">
         ...

JavaScript

$(document).ready(function () {
       $("button#send").click(function(){
            $.ajax({
                type: "POST",
                url: "{{ URL::route('send-message-post') }}" //process
                data: $('form.contact').serialize(),
                success: function(msg){
                    $("#thanks").html(msg) //hide button and show thank you
                    $("#form-content").modal('hide'); //hide popup  
                },
                error: function(){
                    alert("failure");
                }
            });
        })
    })
   
function retrievePrice(opts){
            var urlPrice = "{{ URL::route('profile-photographer-prices') }}";
            $.ajax({
                type: "POST",
                data: { stype: opts, photographer: "{{ e($user -> username) }}" },
                url: urlPrice,
                success: function(res) {
                    $("#price").html(res);
                }
            });
          }    
    
        $( "#stype" ).on("change", function() {
            var selected = $(this).val();
            retrievePrice(selected);
        })