how to create multiple div dynamically inside a div using c#

See more:

ASP.NET

,u>This Is My .aspx page

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<script type ="text/javascript">


    function showcolor() {

        var ddl = document.getElementById("MainContent_DropDownList1");

        var divcolor1 = document.getElementById("MainContent_divcolor");
        
//        var color1 = document.getElementById("MainContent_clr1");
//        var color2 = document.getElementById("MainContent_clr2");
        divcolor1.style.display = "block";
//        $("#divcolor").css({ "visibility": "visible" });
//        $("#MainContent_clr1").show();
//        $("#MainContent_clr2").show();
        //        $(color2).show();
//        $('#MainContent_clr1').css({ "display": "block" ;});
//        $('#MainContent_clr2').css({ "display": "block"; });
    }


</script>

<script  type="text/javascript">
    $(document).ready(function () {
        $('#MainContent_DropDownList1').change(function () {
           
//            $('#MainContent_clr1').hide();
//            $('#MainContent_clr2').hide();
            $("#MainContent_divcolor").css({ "display": "none" });
//            $("#divcolor").css({ "visibility": "Hidden" });
            alert("hi");
//            $("#divcolor").attr('disabled', true);
        });
    });
</script>
   <div style = "width : 200px; float :left;" >
 <div  style =  "height :auto ; width : 15%; background-color : white; float :left; border : 1px solid white;">
      <div id ="divcolor"  runat="server" style =  " display :none;  height :auto ; width : 100%; background-color : white; float :left ; margin-top :20px ;">
     <%-- <div  runat="server" id ="clr1" style = "  height :15px ; width :15px ; margin :2px;"></div>
      <div  runat="server" id ="clr2"  style="  height  :15px ; width :15px ;margin :2px;"></div>--%>
      </div></div><div class ="drop" style = "float :left; width :50% "><asp:DropDownList ID="DropDownList1" runat="server" onclick = "showcolor();" >

            <asp:ListItem Value = "Blue">blue</asp:ListItem>
            <asp:ListItem Value = "red">Red</asp:ListItem>
        </asp:DropDownList> 
        </div>
        </div>You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
   
</asp:Content>

This is code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        StringBuilder stringBuilder = new StringBuilder(string.Empty);
        System.Web.UI.HtmlControls.HtmlGenericControl NewDiv = new System.Web.UI.HtmlControls.HtmlGenericControl();
        int num = DropDownList1.Items.Count;
        for(int i = 0 ; i< DropDownList1.Items.Count ; i++)
        {
            NewDiv.ID = "Newdiv" + i + " ";
            NewDiv.Style["height"] = "15px";
            NewDiv.Style["width"] = "15px";
            NewDiv.Style["margin"] = "2px";
            NewDiv.Style["display"] = "block";

            //stringBuilder.Append("<style type ='Text/css'>#NewDiv"+ i +"{height :15px ; width :15px ; margin :2px;}</script>");
            NewDiv.Style["Background-color"] = Convert.ToString(DropDownList1.Items[i].Value);
            divcolor.Controls.Add(NewDiv);
            //var brControl1 = new System.Web.UI.HtmlControls.HtmlGenericControl { InnerHtml = "<br />" };
            //divcolor.Controls.Add(brControl1);
            
            
        }
        //clr1.Style["Background-color"] = Convert.ToString(DropDownList1.Items[0].Value);
        //clr2.Style["Background-color"] = Convert.ToString(DropDownList1.Items[1].Value);
    }
}

This is my code i just want to create multiple div on the base of listitems in dropdownlist ,
in this scenario i am doing this but only last div is showing when i want to show all.
if in drop down list there is two list item one is blue and other is red then i want to create two div red and blue but there is showing only red please help me how can i solve this problem