CF Component Doesn't Reset Variables - coldfusion

Question

I have some forms and there is a table with "instructions" for each question, for each form. I am trying to add a button which pops a modal displaying each question's instruction. The problem is every button links to the instruction for the first question. The later instructions exist - If I start w/question 2, everything after that shows Q2's instruction. It's as if it gets locked onto the first field and can't discard it.
Here is the component code:
<cfcomponent displayname="QxQ" output="false" hint="Gets QxQ information for display on data entry screen">
<cfparam name="qxq_instruct" default="">
<cfparam name="qxq_fieldGUID" default="">
<cffunction name="getFieldInstructions" hint="Gets the QxQ Instructions for the requesting field">
<cfargument name="qxq_versionGUID" type="string" required="yes">
<cfargument name="qxq_fieldName" type="string" required="yes">
<!--- Get FieldGUID based on form VersionGUID and field name --->
<cfquery name="qryGetqxqfieldGUID" datasource="#application.DSN#">
SELECT
FieldGUID
FROM
_sysformFields
WHERE
VersionGUID = <cfqueryparam cfsqltype="CF_SQL_VARCHAR" value="#qxq_versionGUID#">
AND
FieldName = <cfqueryparam cfsqltype="CF_SQL_VARCHAR" value="#qxq_fieldName#">
</cfquery>
<cfset qxq_fieldGUID = #qryGetqxqfieldGUID.FieldGUID#>
<!--- Get instructions based on fieldGUID --->
<cfquery name="qryGetFieldInstructions" datasource="#application.DSN#">
SELECT
instruct
FROM
_sysFormFieldInstructions
WHERE
fieldGUID = <cfqueryparam cfsqltype="CF_SQL_VARCHAR" value="#qxq_fieldGUID#">
</cfquery>
<cfif qryGetFieldInstructions.recordcount eq 1>
<cfset qxq_instruct = #qryGetFieldInstructions.instruct#>
</cfif>
<cfset modalButton = '
<!--- Modal Button --->
<button type="button" class="btn btn-small" style="background-color: transparent; border: none" data-toggle="modal" data-target="##exampleModal">
<i class="fa fa-question-circle-o fa-2x" style="color: ##8a0d25"></i>
</button>
<!--- Modal --->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span style="text-align: left">
#qxq_versionGUID#<br>
#qxq_fieldName#<br>
#qxq_fieldGUID#<br><br>
#qxq_instruct#
</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
'>
<cfreturn modalButton>
</cffunction>
And here is how I am trying to implement it. This is 2 questions, and should display the instructions for each question. Instead, both buttons display the information for Q1.
<div class="form-group">
<label class="col-sm-1 control-label">1.</label>
<label for="oftndrink" class="col-sm-10 control-label" style="text-align:left">
How often do you have a drink containing alcohol?
</label>
<br>
<cfset form.qxq=createobject("component","#application.componentspath#.cfc_QxQ")>
<label class="col-sm-1">
#form.qxq.getFieldInstructions(qxq_versionGUID="#formInfo.versionGUID#",qxq_fieldName="oftndrink")#
</label>
</div>
(Q2)
<div class="form-group">
<label class="col-sm-1 control-label">2.</label>
<label for="numdrinks" class="col-sm-10 control-label" style="text-align:left">
How many drinks containing alcohol do you have on a typical day when you are drinking?
</label>
<br>
<cfset form.qxq=createobject("component","#application.componentspath#.cfc_QxQ")>
<label class="col-sm-1">
#form.qxq.getFieldInstructions(qxq_versionGUID="#formInfo.versionGUID#",qxq_fieldName="numdrinks")#
</label>
</div>
Thanks for pointing out the answer, which turned out to be really easy!
I am now initializing the component in a pre-process that runs once:
<cfset form.qxq=createobject("component","#application.componentspath#.cfc_QxQ")>
And can add the modal with the correct instructions by inserting just one line. (This part is a big deal because I have to add it to every question on about 150 forms)
<span style="text-align: left">#form.qxq.getFieldInstructions(qxq_versionGUID="#formInfo.versionGUID#",qxq_fieldName="varName")#</span>

Answer 1

The issue here is that both modals are created with the same ID exampleModal.
So, when you try to open using #exampleModal it will open the first element in the document. What you need to do is to make the modals have different ID. Something like this.
<div class="modal fade" id="exampleModal#qxq_fieldGUID#">
and the button arguments like data-target="##exampleModal#qxq_fieldGUID#".
That being said creating this much html for each question will increase your page size and in the cases where there are a lot of questions that might even crash the browser. You should try to make the modal dynamic by using AJAX or JS Objects containing the instructions.