JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fourth">
					<!-- second mini div -->
					<h3> Double Discount </h3>
					<br />
					<p> Cashier </p>
					<p> October 2010 - May 2011 </p>
					<p>
						<button onclick="jobDuties1()">Click here</button> to see my top 
						<input type="text" id="DNumber1" value=""/>job duties
					</p>
					<p id="mduties1"></p>
					</div>
				
					<div class="fourth">
					<!-- last mini div -->
					<h3> University at Albany Science Library </h3>
					<br />
					<p><a href="http://library.albany.edu/science" target="_blank" title="UA Science Library"> UA Science Library </a></p>
					<p> Senior Student Assistant </p>
					<p> August 2012 - Present </p>
					<p>
						<button onclick="jobDuties2()">Click here</button> to see my top 
						<input type="text" id="DNumber2" value=""/>job duties
					</p>
					<p id="mduties2"></p>
					</div>

JavaScript

function jobDuties1() {
    var a= document.getElementById("DNumber1").value;
    var duties1= ["Count the registers","Sales transactions including returns and exchanges","Stock","Inventory","Help Customers with inquires about the merchandise"];
    if (a <= duties1.length){
        out1 = (duties1.slice(0,a)).join();
    }
    document.getElementById("mduties1").innerHTML =out1;
}

    var out1 = "";

function jobDuties2() {
    var a= document.getElementById("DNumber2").value;
    var duties2= ["Shelving and searches","Shelf reading","Check in/out books/laptops/headphones,etc","Taking fines","Closing Lock up"];
    if (a <= duties2.length){
        out2 = (duties2.slice(0,a)).join();
    }
    document.getElementById("mduties2").innerHTML =out2;
}

    var out2 = "";