Dynamic modal content with multiple variables - dynamic

Question

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">×</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>

Answer 1

Finally found it......
Found an article that explains that the text method is not actually the right one to use if you want to parse HTML. And in fact there is an HTML method in jQuery... :-)
modal.find('.modal-title1').html(item);
works.