Add a row similar to previous row in my webgrid in asp.net mvc -

i facing issue adding new row webgrid. webgrid data has dropdownlist in each column. when click button add new row must repeat same format of row. pasting webgrid code here. please me im new asp.net mvc

 <div id="grid1">             @wg1.gethtml(     tablestyle: "gridtable",     headerstyle: "gridhead",             rowstyle: "gridrow",     footerstyle: "gridfooter",             alternatingrowstyle: "gridaltrow",             htmlattributes: new { id = "tablegrid" },     columns: wg1.columns(     wg1.column("condition", format: @item => html.dropdownlist("condition", (ienumerable<selectlistitem>)model.sourcetablemodel[0].condition, "select condition", new { style = "width:100px", @class = "condition" })),     wg1.column("sourcetable1", format: @item => html.dropdownlist("sourcetable1", (ienumerable<selectlistitem>)model.sourcetablemodel[0].sourcetablename, "select source 1", new { style = "width:100px", @class = "sourcetablea" })),     wg1.column("columnnames", format: @item => html.dropdownlist("columnnames", new selectlist(string.empty, "value", "text"), "select column", new { id = string.empty, style = "width:100px", @class = "field1" })),     wg1.column("operator", format: @item => html.dropdownlist("operator", (ienumerable<selectlistitem>)model.sourcetablemodel[0].operator, "select operator", new { style = "width:100px", @class = "operator" })),     wg1.column("sourcetable1", format: @item => html.dropdownlist("sourcetable1", (ienumerable<selectlistitem>)model.sourcetablemodel[0].sourcetablename, "select source 2", new { style = "width:100px", @class = "sourcetablea" })),     wg1.column("columnnames", format: @item => html.dropdownlist("columnname", new selectlist(string.empty, "value", "text"), "select column", new { id = string.empty, style = "width:100px", @class = "field1" })),     wg1.column("condition", format: @item => html.dropdownlist("condition", (ienumerable<selectlistitem>)model.sourcetablemodel[0].condition, "select condition", new { style = "width:100px", @class = "condition" }))     )     )         </div> <td>         <input type="submit" value="add contact" id="clicktoadd" />  

my javascript follow:

<script type="text/javascript"> $('#clicktoadd').click(function () {     var newrow = "<tr><td> @wg1.gethtml(htmlattributes: new { id = "tablegrid" },columns: wg1.columns(wg1.column("condition", format: @item => html.dropdownlist("condition", (ienumerable<selectlistitem>)model.sourcetablemodel[0].condition, "select condition", new { style = "width:100px", @class = "condition" })), wg1.column("sourcetable1", format: @item => html.dropdownlist("sourcetable1", (ienumerable<selectlistitem>)model.sourcetablemodel[0].sourcetablename, "select source 1", new { style = "width:100px", @class = "sourcetablea" })), wg1.column("columnnames", format: @item => html.dropdownlist("columnnames", new selectlist(string.empty, "value", "text"), "select column", new { id = string.empty, style = "width:100px", @class = "field1" })), wg1.column("operator", format: @item => html.dropdownlist("operator", (ienumerable<selectlistitem>)model.sourcetablemodel[0].operator, "select operator", new { style = "width:100px", @class = "operator" })), wg1.column("sourcetable1", format: @item => html.dropdownlist("sourcetable1", (ienumerable<selectlistitem>)model.sourcetablemodel[0].sourcetablename, "select source 2", new { style = "width:100px", @class = "sourcetablea" })), wg1.column("columnnames", format: @item => html.dropdownlist("columnname", new selectlist(string.empty, "value", "text"), "select column", new { id = string.empty, style = "width:100px", @class = "field1" })),wg1.column("condition", format: @item => html.dropdownlist("condition", (ienumerable<selectlistitem>)model.sourcetablemodel[0].condition, "select condition", new { style = "width:100px", @class = "condition" }))))</div></td></tr>";     $("#webgrid tbody: last").append(newrow); }) </script> 

my edited webgrid follow:

@{ webgrid wg1 = new webgrid(model.sourcetablemodel);  }  <table> <tr>     <td>         <div id="grid1">             @wg1.gethtml(     tablestyle: "gridtable",     headerstyle: "gridhead",             rowstyle: "gridrow",     footerstyle: "gridfooter",             alternatingrowstyle: "gridaltrow",             htmlattributes: new { id = "tablegrid" },     columns: wg1.columns(     wg1.column("condition", format: @item => html.dropdownlist("condition", (ienumerable<selectlistitem>)model.sourcetablemodel[0].condition, "select condition", new { style = "width:100px", @class = "condition" })),     wg1.column("sourcetable1", format: @item => html.dropdownlist("sourcetable1", (ienumerable<selectlistitem>)model.sourcetablemodel[0].sourcetablename, "select source 1", new { style = "width:100px", @class = "sourcetablea" })),     wg1.column("columnnames", format: @item => html.dropdownlist("columnnames", new selectlist(string.empty, "value", "text"), "select column", new { id = string.empty, style = "width:100px", @class = "field1" })),     wg1.column("operator", format: @item => html.dropdownlist("operator", (ienumerable<selectlistitem>)model.sourcetablemodel[0].operator, "select operator", new { style = "width:100px", @class = "operator" })),     wg1.column("sourcetable1", format: @item => html.dropdownlist("sourcetable1", (ienumerable<selectlistitem>)model.sourcetablemodel[0].sourcetablename, "select source 2", new { style = "width:100px", @class = "sourcetablea" })),     wg1.column("columnnames", format: @item => html.dropdownlist("columnname", new selectlist(string.empty, "value", "text"), "select column", new { id = string.empty, style = "width:100px", @class = "field1" })),     wg1.column("condition", format: @item => html.dropdownlist("condition", (ienumerable<selectlistitem>)model.sourcetablemodel[0].condition, "select condition", new { style = "width:100px", @class = "condition" }))     )     )         </div>     </td> </tr>  <tr>       </tr>  <tr>     <td>         <input type="submit" value="add contact" id="clicktoadd" />         <input type="submit" id="submitbutton1" value="save" />        @using (html.beginform("whereview", "home", formmethod.post))        {         <input type="submit" id="nextbutton" value="next" />        }     </td> </tr> </table> 

respective javascript dynamically adding new row :

<script type="text/javascript"> $('#clicktoadd').click(function () {     var newrow = $("#webgrid tbody tr:last").clone();     $("#webgrid tbody").append(newrow); }) </script> 

it didnt work expected