Sono arrivato a riscrivere tutto, ma ogni domanda ha un pezzo in jq e anche in css. C'è un modo che non mi permette di aggiungere queste parti, ogni qual volta devo aggiunngere una domanda con un nuovo id?

codice:
<html>
<head>
<meta rel="author" href="http://Crunchify.com" content="">
 
<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".id1").click(function() {
            $(".domanda1").toggle();
        });
    $(".id2").click(function() {
            $(".domanda2").toggle();
        });
    });
</script>
 
<style type="text/css">
div.domanda1,p.id1 {
    margin: 0px;
    padding: 5px;
    text-align: center;
    background: #ddd;
    border: solid 1px #fff;
}
 
div.domanda1 {
    widht: 50%;
    height: 100px;
    display: none;
}

div.domanda2,p.id2 {
    margin: 0px;
    padding: 5px;
    text-align: center;
    background: #ddd;
    border: solid 1px #fff;
}
 
div.domanda2 {
    widht: 50%;
    height: 100px;
    display: none;
}
</style>
</head>
 
<body>
    <p class="id1">1</p>
     <div class="domanda1">
        <p>Risposta1</p>
    </div>
    <br>
    <br>
     <p class="id2">2</p>
     <div class="domanda2">
        <p>Risposta2</p>

</div>
 
</body>
</html>