Dynamic modal content with multiple variables

I realise that this has been asked a number of ways already, but for the life of me I cant find one that is similar to my issue.... I have the adapted the 'recognised' code in the documentation for showing dynamic content in a modal to the following.

Pulling my hair out, and sure I am just doing something silly.......

HTML for the call

                                <div class="row">
                                    <?php $option=array_column($options, 'name', 'id');?>
                                    <div class="col-5 col-md-6 col-lg-2 clickable" data-toggle="modal" data-target="#Engine1Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1">Engine 1</div>
                                    <div class="col-7 col-md-6 col-lg-4">
                                        <a href="#" data-toggle="modal" data-target="#Engine1Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1">
                                            <?php echo $option[$vesseldata['Engine1Type']];?>
                                        </a>
                                    </div>
                                    <div class="col-5 col-md-6 col-lg-2>Engine 1 Serial</div><div class="col-7 col-md-6 col-lg-4"><?php echo $vesseldata['Engine1Number'];?></div>
                                </div>

Then the script is just embedded in the page at the moment to try and make life easy.

                <script>
                        $('#Engine2Modal').on('show.bs.modal', function (event) {
                          var trigger = $(event.relatedTarget); // Button that triggered the modal
                          var thing1 = trigger.data('thing1'); // Extract info from data-* attributes
                          var thing2 = trigger.data('thing2'); // Extract info from data-* attributes
                          // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                          // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                          var modal = $(this);
                          modal.find('.modal-title').text(thing1 + '<br>Serial # ' + thing2);
                          });
                                      </script>

Then the Modal html is here

<div class="modal right fade in" id="Engine2Modal" tabindex="-1" role="dialog"  aria-labelledby="ModalLabel" aria-hidden="true">
    <form id="service_form"  method="get">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalLabel">New message</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <label class="control-label col-xs-4 col-md-3" for="DesignRef">Design Reference</label>
                            <div class="col-xs-8  col-md-7">
                            <input type="text" class="form-control" name="DesignRef" id="DesignRef" placeholder="Design Reference" value=""/>
                            <?php if(!empty($registration_error['DesignRef'])) { ?>
                                    <br/>
                                    <div class="alert alert-danger" role="alert"><?php echo $registration_error['DesignRef']; ?></div>
                            <?php } ?>
                            </div>
                        </div>
                    </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </form>
</div>