jQuery generate page help

[sspoke]

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.

 

        $('#stages').html("");
        var stage = $("#stages");
                var L = $('<h2></h2>').attr('id', 'startachat').append('Who do you wish to connect to?');
                stage.append(L);
                var k = $('<table></table>').attr('id', 'chattypes');
                stage.append(k);
        var G = $('<tr></tr>');	        
        k.append(G);
        var m = $('<td></td>');
        var s = $('<img />').attr({'src' : 'data/male_off.png', 'alt' : 'Male', 'class' : 'gender', 'id' : 'genderM'});
        var N = $('<td><td />').attr('id', 'chattypeorcell').append('or');
        var j = $('<td></td>');
        var D = $('<img />').attr({'src' : 'data/female_off.png', 'alt' : 'Female', 'class' : 'gender', 'id' : 'genderF'});
        var x = $('<td><td />').attr('id', 'chattypeorcell').append('or');
        var l = $('<td></td>');
        var z = $('<img />').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);

 

the html it generates has way to many "or" table data

 

output

<div id="stages">
  <h2 id="startachat">Who do you wish to connect to?</h2>
  <table id="chattypes">
  <tbody>
  <tr>
    <td><img src="data/male_off.png" alt="Male" class="gender" id="genderM"></td>
    <td id="chattypeorcell">or</td><td id="chattypeorcell">or</td>
    <td><img src="data/female_off.png" alt="Female" class="gender" id="genderF"></td>
    <td id="chattypeorcell">or</td><td id="chattypeorcell">or</td>
    <td><img src="data/any_off.png" alt="Anyone" class="gender" id="genderA"></td>
  </tr>
  </tbody>
  </table>
</div>

 

I want it to generate something similar to this

 

            <div id="stages"> 
              <h2 id="startachat">What's your gender?</h2> 
              <table id="chattypes"> 
                <tr> 
                    <td id="chattypetextcell"><img src="data/male_off.png" alt="Male" class="gender" id="genderM"/></td> 
                    <td id="chattypeorcell">or</td> 
                    <td id="chattypevideocell"><img src="data/female_off.png" alt="Female" class="gender" id="genderF"/></td> 
                    <td id="chattypeorcell">or</td> 
                    <td id="chattypevideocell"><img src="data/any_off.png" alt="Anyone" class="gender" id="genderA"/></td> 
                </tr> 
              </table> 
            </div> 

 

thank you for reading

[sspoke]

nevermind solved: tag issue thanks to stackoverflow peeps

 

replaced

 var N = $('<td><td />').attr('id', 'chattypeorcell').append('or');

to

 var N = $('<td></td>').attr('id', 'chattypeorcell').append('or');