JSFiddle - React, Tailwind, and code Playground

by Hemal Patel

HTML

<div class="packageIdDiv" id="packageIdDiv">
    <label class="col-md-1">Enter Package ID:</label>

      <input class="col-md-2" id="packageIdInput" type="text"   size="22" maxlength="21" autofocus="on" placeholder="Ex:1Z12345672434234" />
		<input type="button" class="plus_green" id="plus_green" onClick="function2()"> </input>
    <input type="button" class="button" value="Submit" onClick="appendNewText()" />
    </div>
<div class="packageIdDisplayDiv" id="packageIdDisplayDiv">
    <input class="bigbox" id="packageIdDisplay" placeholder="All entered Package ID will come here, max. 25 IDs."  />
</div>

CSS

.packageIdDiv {
    width:315px;
}
.col-md-3 {
    margin-top: 25px;
}
.button {
    margin-top: 50px;
    margin-left: 105px;
}
.bigbox {
     width: 350px;
     height: 300px;
     margin-top: -100px;
     margin-left: 350px;
}

JavaScript

function function2() {
    var input = document.getElementById("packageIdInput").value;
    var output = document.getElementById("packageIdDisplay").value;
    
    input = output;
}