JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<span style="font-size:10px;font-weight:normal;"><a class="fancy" title="Click the &quot;X&quot; in the upper right hand corner of the image to close." href="https://surveys.researchresults.com/legacy/191/0625/SL_Edge_C.jpg">Click to view a larger version of the current bill</a><p id="firstLink" style="display:none;">0</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="fancy" title="Click the &quot;X&quot; in the upper right hand corner of the image to close." href="https://surveys.researchresults.com/legacy/191/0625/SL_Edge_D.jpg">Click to view a larger version of the new bill</a></span>

<div class="rrQuestionContainer">
    <label for="_Q1">
        <div></div>	<span class="mrQuestionText" style="">Click counter for Q12_Intro <b>First</b> Link</span>

    </label>
    <div></div>	<span style="">
								<div></div>
								<input type="text" name="_QPClick__Q12Intro_QClickCounter1" id="_Q1" class="mrEdit" autocomplete="on" style="
            margin-left: 1em;
        " maxlength="1024" value="">
							</span>

</div>
    
<div class="rrQuestionContainer">
							<label for="_Q2">
								<div></div>
								<span class="mrQuestionText" style="">Click counter for Q12_Intro <b>Second</b> Link</span>
							</label>
							<div></div>
							<span style="">
								<div></div>
								<input type="text" name="_QPClick__Q12Intro_QClickCounter2" id="_Q2" class="mrEdit" autocomplete="on" style="
            margin-left: 1em;
        " maxlength="1024" value="">
							</span>
						</div>

JavaScript

var ClickCounter_v1.1
           if(iniateClick.length > 0)
			{
				var clickCounterFirst = parseInt($('input[type=text]:eq(0)').val(), 10);
				fancyAnchorOne.after("<p id='firstLink' style='display:none;'>0</p>");
				if(isNaN(clickCounterFirst))
				{
					clickCounterFirst = 0;
				}
				$("p#firstLink").text(clickCounterFirst);
				var firstLink = parseInt($("p#firstLink").text(), 10);

				fancyAnchorOne.mousedown(function () {
					$("p#firstLink").text(firstLink + 1);
					firstLink = parseInt($("p#firstLink").text(), 10);
					$('input[type=text]:eq(0)').val(firstLink);
				});

				var clickCounterSecond = parseInt($('input[type=text]:eq(1)').val(), 10);		
				fancyAnchorTwo.after("<p id='secondLink' style='display:none;'>0</p>");
				if(isNaN(clickCounterSecond))
				{
					clickCounterSecond = 0;
				}
				$("p#secondLink").text(clickCounterSecond);
				var secondLink = parseInt($("p#secondLink").text(), 10);
				
				fancyAnchorTwo.mousedown(function () {
					$("p#secondLink").text(secondLink + 1);
					secondLink = parseInt($("p#secondLink").text(), 10);
					$('input[type=text]:eq(1)').val(secondLink);
				});
			}