title: HTML generation problem
body: <p>I'm trying to generate a small part of the page using jquery which is generating in the wrong matter even though the code looks solid.</p>
  
  <pre><code>$('#stages').html("");
      var stage = $("#stages");
      var L = $('&lt;h2&gt;&lt;/h2&gt;').attr('id', 'startachat').append('Who do you wish to connect to?');
      stage.append(L);
      var k = $('&lt;table&gt;&lt;/table&gt;').attr('id', 'chattypes');
      stage.append(k);
          var G = $('&lt;tr&gt;&lt;/tr&gt;');         
          k.append(G);
          var m = $('&lt;td&gt;&lt;/td&gt;');
          var s = $('&lt;img /&gt;').attr({'src' : 'data/male_off.png', 'alt' : 'Male', 'class' : 'gender', 'id' : 'genderM'});
          var N = $('&lt;td&gt;&lt;td /&gt;').attr('id', 'chattypeorcell').append('or');
          var j = $('&lt;td&gt;&lt;/td&gt;');
          var D = $('&lt;img /&gt;').attr({'src' : 'data/female_off.png', 'alt' : 'Female', 'class' : 'gender', 'id' : 'genderF'});
          var x = $('&lt;td&gt;&lt;td /&gt;').attr('id', 'chattypeorcell').append('or');
          var l = $('&lt;td&gt;&lt;/td&gt;');
          var z = $('&lt;img /&gt;').attr({'src' : 'data/any_off.png', 'alt' : 'Anyone', 'class' : 'gender', 'id' : 'genderA'});
  
          G.append(m);
          m.append(s);
          G.append(N);
          G.append(j);
          j.append(D);
          G.append(x);
          G.append(l);
          l.append(z);
  </code></pre>
  
  <p>the html it generates has way to many "or" table data</p>
  
  <p>output</p>
  
  <pre><code>&lt;div id="stages"&gt;
    &lt;h2 id="startachat"&gt;Who do you wish to connect to?&lt;/h2&gt;
    &lt;table id="chattypes"&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;img src="data/male_off.png" alt="Male" class="gender" id="genderM"&gt;&lt;/td&gt;
      &lt;td id="chattypeorcell"&gt;or&lt;/td&gt;&lt;td id="chattypeorcell"&gt;or&lt;/td&gt;
      &lt;td&gt;&lt;img src="data/female_off.png" alt="Female" class="gender" id="genderF"&gt;&lt;/td&gt;
      &lt;td id="chattypeorcell"&gt;or&lt;/td&gt;&lt;td id="chattypeorcell"&gt;or&lt;/td&gt;
      &lt;td&gt;&lt;img src="data/any_off.png" alt="Anyone" class="gender" id="genderA"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want it to generate something similar to this</p>
  
  <pre><code>    &lt;div id="stages"&gt; 
        &lt;h2 id="startachat"&gt;What's your gender?&lt;/h2&gt; 
        &lt;table id="chattypes"&gt; 
          &lt;tr&gt; 
              &lt;td id="chattypetextcell"&gt;&lt;img src="data/male_off.png" alt="Male" class="gender" id="genderM"/&gt;&lt;/td&gt; 
              &lt;td id="chattypeorcell"&gt;or&lt;/td&gt; 
              &lt;td id="chattypevideocell"&gt;&lt;img src="data/female_off.png" alt="Female" class="gender" id="genderF"/&gt;&lt;/td&gt; 
              &lt;td id="chattypeorcell"&gt;or&lt;/td&gt; 
              &lt;td id="chattypevideocell"&gt;&lt;img src="data/any_off.png" alt="Anyone" class="gender" id="genderA"/&gt;&lt;/td&gt; 
          &lt;/tr&gt; 
        &lt;/table&gt; 
      &lt;/div&gt; 
  </code></pre>
  
  <p>thank you for reading</p>