Finishing my jQuery typing feature
<p>Right now I have some code that generates <code>&lt;li&gt;</code> elements that have a height and width and has a certain background image applied. When a user presses a key, the matching css class is activated onto the created <code>&lt;li&gt;</code> creating a certain character on the screen.. I have two active problems...</p>

<ol>
<li><p>I want a space generated between the <code>&lt;li&gt;</code>'s when the spacebar is typed. To do this I created a blank <code>&lt;li&gt;</code> element that contains "&nbsp;&nbsp;" with a class of "ejotyBlank". But for some reason this will not work for me!</p></li>
<li><p>When a user clicks the backspace, the last <code>&lt;li&gt;</code> should be removed. I don't even know where to begin with this issue.</p></li>
</ol>

<p>I am doing all this right now by creating an array and adding to it each time a key is pressed then using a for loop to generate all the <code>&lt;li&gt;</code>'s onto the page. </p>

<p>You can visit the page and its action on this page: <a href="http://imaspy.com/ejotyz.html" rel="nofollow">ImASpy.com/Ejoty</a>
Click inside of Title: and start typing letters.</p>

<p>I am sure not all of it will apply, especially the CSS, but here is also my code....</p>

<p>Thank you so so much to the person who helps me finish this!</p>

<p><strong>Here is my jQuery:</strong></p>

<pre><code>$(document).ready(function() {

var maxWidth = 0;
var titleArray = new Array;
var nameArray = new Array;
var i = 0;
var letterWidth;

$('#ejotyTitleInput').keypress(function(e)
{
    var letterValue = String.fromCharCode(e.which);

if (e.which == 8) {
                e.preventDefault();
                alert('back space');
            }   
    if(e.which==32){
        var newNode = document.createElement("li"); 
        $(newNode).addClass("ejotyBlank");
        newNode.appendChild(document.createTextNode("&amp;nbsp;&amp;nbsp;"));
        titleArray[i] = newNode;
    }


    if (letterValue.match(/[a-zA-Z\.]/))
    letterValue = letterValue.toUpperCase();
    letterValue = "ejoty" + letterValue;


    var newNode = document.createElement("li"); 
    $(newNode).addClass(letterValue);

    nameArray[i] = letterValue;
    titleArray[i] = newNode;
    i++;


    maxWidth = 0;
    letterWidth = 0;
    for(var x = 0;x&lt;=titleArray.length;++x){
        var currentLI = titleArray[x];
        $("ul#ejotyTitle").append(currentLI);
        letterWidth += $("." + nameArray[x]).width() + 3;
        var currentLetterWidth = $("." + nameArray[x]).width();
        maxWidth = maxWidth + currentLetterWidth;
        $("ul#ejotyTitle").css("width", letterWidth)
    }
});

});
</code></pre>

<p><strong>Here is my HTML code:</strong></p>

<pre><code>  &lt;footer id="page1"&gt;
    &lt;h2&gt;Now you try!&lt;/h2&gt;
    &lt;form id="ejotyCreator"&gt;
        &lt;table&gt;
        &lt;tr&gt;
        &lt;td&gt;Title:&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="ejotyTitleInput" name="title" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
        &lt;td&gt;Text:&lt;/td&gt;
        &lt;td&gt;&lt;textarea name="ejotyText" cols="20" rows="2" id="ejotyText"&gt;&lt;/textarea&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
        &lt;td&gt;Signed:&lt;/td&gt;
        &lt;td&gt;&lt;input type="text" id="ejotySig" name="title"/&gt;&lt;/td&gt;
        &lt;/tr&gt;

        &lt;/table&gt;
    &lt;/form&gt;
  &lt;/footer&gt;&lt;!-- end page1 footer --&gt;


 &lt;section id="rightPage" class="clearfix"&gt;

              &lt;ul class="ejotyWriting clearfix"&gt;
                  &lt;li class="ejotyT"&gt;&lt;/li&gt;
                  &lt;li class="ejotyH"&gt;&lt;/li&gt;
                  &lt;li class="ejotyI"&gt;&lt;/li&gt;
                  &lt;li class="ejotyS"&gt;&lt;/li&gt;
                  &lt;li&gt;&amp;nbsp;&lt;/li&gt;
                  &lt;li class="ejotyI"&gt;&lt;/li&gt;
                  &lt;li class="ejotyS"&gt;&lt;/li&gt;
                  &lt;li&gt;&amp;nbsp;&lt;/li&gt;
                  &lt;li class="ejotyE"&gt;&lt;/li&gt;
                  &lt;li class="ejotyJ"&gt;&lt;/li&gt;
                  &lt;li class="ejotyO"&gt;&lt;/li&gt;
                  &lt;li class="ejotyT"&gt;&lt;/li&gt;
                  &lt;li class="ejotyY"&gt;&lt;/li&gt;
                  &lt;li class="ejotyOther"&gt;-&lt;/li&gt;
                  &lt;li class="ejotyZ"&gt;&lt;/li&gt;
                  &lt;li&gt;...&lt;/li&gt;
              &lt;/ul&gt;
                  &lt;br /&gt;
                  &lt;br /&gt;
              &lt;div id="centerTitle"&gt;
              &lt;ul class="ejotyWriting clearfix" id="ejotyTitle"&gt;
              &lt;/ul&gt;&lt;!-- end title --&gt;
              &lt;/div&gt;&lt;!--end centerTitle --&gt;
                   &lt;br /&gt;
              &lt;ul class="ejotyWriting clearfix" id="ejotyUserContent" &gt;    
              &lt;/ul&gt;&lt;!-- end ejotyContent --&gt;
                  &lt;br /&gt;

              &lt;ul class="ejotyWriting clearfix" id="ejotySigniature"&gt; 
              &lt;/ul&gt;&lt;!-- end ejotyContent --&gt;


      &lt;/section&gt;&lt;!-- end rightPage --&gt;
</code></pre>

<p><strong>Here is my CSS:</strong></p>

<pre><code>    /************* EJOTYZ CONTENT *************/


section, footer {
    display: block;
}


table, tr, td {
    margin: 0;
    padding: 0;
}
form {
    padding: 0;
    margin: 0;
}
td.subtractMargin {
    margin-top: 15px;
}

h2 {
    color: #333;
    margin: 0 0 0 0px;
    padding: 0;
    text-decoration: underline;
}

textarea {
    resize: none;
    margin: 0 0 -6px 10px;
    padding: 5px;
}



input {
    margin: 0 0 0 10px;
    padding: 5px;
    color: #000;
}

footer#page1 {
    width: 260px;
    height: 80px;
    position: absolute;
    top: 350px;
    left: 45px; 
}

section#rightPage {
    width: 320px;
    height: 390px;
    position: absolute;
    top: 15px;
    left: 355px;
    overflow: auto; 
}


hr {
    border-top-width: 2px;
    border-top-style: dotted;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #333;
    border-right-color: #333;
    border-bottom-color: #333;
    border-left-color: #333;
    width: 275px;
    margin: -1px 0 15px 10px;
}
footer#page2 {
    width: 270px;
    height: 80px;
    position: absolute;
    top: 405px;
    left: 395px;    
}

ul#ejoty {
    padding: 0;
    margin: 0 0 0 35px;
}

ul#ejoty li {
    list-style: none;
    display: block;
    float: left;
    color: #000;
    margin-right: 2px;
}

ul.ejotyWriting {
    padding: 0;
    margin: 0 0 0 5px;  
}

ul.ejotyWriting li {
    list-style: none;
    display: block;
    float: left;
    color: #000;
    margin-right: 2px;  
}

h1.bookTitle {
    color: #333;
    margin-left: 15px;
}

ul#ejotyUserContent {
 background: #3F9;  
 width: auto;
}


div#centerTitle {
 padding: 0px 5px 5px 5px;
 width: 300px;
 text-align: center;
 margin: 0 auto;
}

ul#ejotyTitle {
max-width: 300px;
margin: 0 auto; 
}




/************* EJOTYZ LETTERS *************/

.ejotyBlank {
height:12px;
width:43px;
margin-top: 5px;
}

.ejotyOther {
height:12px;
}


.ejotyB{
height:12px;
width:34px;
margin-top: 5px;
background:url(images/ejoty.png) -50px 1px no-repeat;
}

.ejotyC{
height:12px;
width:27px;
margin-top: 5px;
background:url(images/ejoty.png) -90px 1px no-repeat;
}

.ejotyD{
height:12px;
width:19px;
margin-top: 5px;
background:url(images/ejoty.png) -123px 1px no-repeat;
}

.ejotyE{
height:12px;
width:10px;
margin-top: 5px;
background:url(images/ejoty.png) -149px 1px no-repeat;
}

.ejotyF{
height:12px;
width:43px;
margin-top: 5px;
background:url(images/ejoty.png) -1px -20px no-repeat;
}

.ejotyG{
height:12px;
width:35px;
margin-top: 5px;
background:url(images/ejoty.png) -49px -20px no-repeat;
}

.ejotyH{
height:12px;
width:27px;
margin-top: 5px;
background:url(images/ejoty.png) -90px -20px no-repeat;
}

.ejotyI{
height:12px;
width:19px;
margin-top: 5px;
background:url(images/ejoty.png) -124px -20px no-repeat;
}

.ejotyJ{
height:12px;
width:14px;
margin-top: 5px;
background:url(images/ejoty.png) -150px -20px no-repeat;
}

.ejotyK{
height:12px;
width:45px;
margin-top: 5px;
background:url(images/ejoty.png) -1px -44px no-repeat;
}

.ejotyL{
height:12px;
width:36px;
margin-top: 5px;
background:url(images/ejoty.png) -50px -44px no-repeat;
}

.ejotyM{
height:12px;
width:28px;
margin-top: 5px;
background:url(images/ejoty.png) -92px -44px no-repeat;
}

.ejotyN{
height:12px;
width:20px;
margin-top: 5px;
background:url(images/ejoty.png) -125px -44px no-repeat;
}

.ejotyO{
height:12px;
width:16px;
margin-top: 5px;
background:url(images/ejoty.png) -150px -44px no-repeat;
}

.ejotyP{
height:12px;
width:44px;
margin-top: 5px;
background:url(images/ejoty.png) -1px -66px no-repeat;
}

.ejotyQ{
height:12px;
width:36px;
margin-top: 5px;
background:url(images/ejoty.png) -49px -66px no-repeat;
}

.ejotyR{
height:12px;
width:28px;
margin-top: 5px;
background:url(images/ejoty.png) -92px -66px no-repeat;
}

.ejotyS{
height:12px;
width:20px;
margin-top: 5px;
background:url(images/ejoty.png) -125px -66px no-repeat;
}

.ejotyT{
height:12px;
width:16px;
margin-top: 5px;
background:url(images/ejoty.png) -151px -66px no-repeat;
}

.ejotyU{
height:12px;
width:44px;
margin-top: 5px;
background:url(images/ejoty.png) -1px -88px no-repeat;
}

.ejotyV{
height:12px;
width:36px;
margin-top: 5px;
background:url(images/ejoty.png) -49px -88px no-repeat;
}

.ejotyW{
height:12px;
width:28px;
margin-top: 5px;
background:url(images/ejoty.png) -92px -88px no-repeat;
}

.ejotyX{
height:12px;
width:20px;
margin-top: 5px;
background:url(images/ejoty.png) -124px -88px no-repeat;
}

.ejotyY{
height:12px;
width:16px;
margin-top: 5px;
background:url(images/ejoty.png) -151px -88px no-repeat;
}

.ejotyZ{
height:12px;
width:16px;
margin-top: 5px;
background:url(images/ejoty.png) 0px -109px no-repeat;
}

.ejotyA{
height:12px;
width:43px;
margin-top: 5px;
background:url(images/ejoty.png) -1px 1px no-repeat;
}
</code></pre>
