JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left">      
  <div class="box">
    <div class="boxtitle"><span class="boxtitleleftgap">&nbsp;</span><span class="boxtitlebulk"><span class="boxtitletext">Folders</span><div style="float: right; margin-top: 4px;"><a href="#" onclick="javascript: AddFolder();"><div class="addplus">&nbsp;</div></a></div></span></div>
      <div class="boxcontent">
        <form method="post" id="folderform" action="http://www.daysofthedead.net/hub/member.php?action=list-volunteer-apps" name="folderform">
          <a class="even" href="member.php?action=list-volunteer-apps&folder=2">Folder 2 <span class="text">(1)</span></a><a class="even" href="member.php?action=list-volunteer-apps&folder=1">Folder 1 <span class="text">(0)</span></a>
          <div id="foldercontainer">
              <input id="addSubmit" type="submit" value="Add">
              <input id="folderName" name="folder[]" type="text" size="20" style="" />
          </div>
        </form>
      </div>
  </div>
</div>

CSS

a:visited { COLOR: #333333; TEXT-DECORATION: none; outline: none; }
a:hover { COLOR: red !important; TEXT-DECORATION: none; outline: none; }
a:link { COLOR: #333333; TEXT-DECORATION: none; outline: none; }
#left    { float: left; left: 0px; width: 14em; height: 100%; }
.box { margin: 10px 0 10px 10px; }
.boxtitle       { position: relative; }
.boxtitleleftgap { background: url("http://oi45.tinypic.com/9hte7s.jpg") no-repeat top left; display: inline-block; width: 3px; margin: 0; padding: 0; height: 1.5em; }
.boxtitlebulk   { background: url("http://oi50.tinypic.com/2dv0cwk.jpg") no-repeat top right; position: absolute; left: 3px; right: 0; height: 1.5em; vertical-align: middle; }
.boxtitletext   { background: url("http://oi48.tinypic.com/f6vbm.jpg") no-repeat 2px 2px; padding-left: 1.7em; padding-top: 0; font-size: 11px; font-family: verdana, arial, helvetica, sans-serif; vertical-align: middle; }
.boxcontent         { border: 1px solid #cdc6b6; }
.boxcontent a       { display: block; text-decoration: none; color: black; font-family: Verdana, Tahoma, sans-serif; font-size: 11px; border-bottom: 1px solid #f5f5f5; text-indent: 20px; padding: 0.375em; background-image: url("http://oi50.tinypic.com/1eweu0.jpg"); background-repeat: no-repeat; background-position: 0.375em 0.25em; line-height: 140%; }
.boxcontent a:hover { background-color: #fff8e9; color: #476ca4; }
.even { background-color: #fefefe; }
.text { COLOR: #333333; }
.addplus { display: inline; background: url("http://oi47.tinypic.com/27zatqg.jpg") no-repeat 0px 0px; padding: 0 0 0 20px; }
#foldercontainer #addSubmit {
    display:none;
}
#foldercontainer #folderName {
    display:none;
    width: 120px; 
    background: #FFF url(http://oi47.tinypic.com/2r2lqp2.jpg) repeat-x top left; 
    color: #000; 
    border: 1px solid #cdc2ab; 
    padding: 2px; 
    margin: 0px; 
    vertical-align: middle;
}

JavaScript

// set up a variable to test if the add area is visible
// and another to keep count of the add-folder text boxes
var is_vis = false,
    folderAddCt = 0;

function AddFolder() {
    if(is_vis == false){
        // if it's not visible, show the input boxes and 
        $('#foldercontainer input').show();
        // set the flag true
        is_vis = true;
    } else {
        // if visible, create a clone of the first add-folder
        // text box with the .clone() method
        $folderTB = $("#folderName").clone();
        // give it a unique ID
        $folderTB.attr("id","folderName_" + folderAddCt++);
        // and append it to the container
        $("#foldercontainer").append($folderTB);
    }
}