Generador de posts con javasript

[tdguchi]

Buenos días, estoy haciendo un generador de posts php con html5+css3+js la estructura del html, es la siguiente:

Tengo dos opciones, (son tipo radio) al hace click en una de ellas, se cambia con js de display:none a block un div con nuevas opciones

El esquema se repite con este bloque, según la opcion que se escoja, aparece un generador u otro cambiando none a block, según el radio que sea seleccionado

(por ejemplo, uno de peliculas, o uno de series, uno de juegos)

En cada generador hay distintos campos la gran mayoría de este estilo

Código HTML:

<div class="portada">Portada Película: * <input class="muylargo" id="portada" type="url" placeholder="http://www.url.com"></div>
 

y luego al final de cada generador tengo

Código HTML:

<input type="button" class="boton2" onclick="postpel()" value="Generar Post"><br><br>
<p class="texto">Copia el contenido del cuadro que está debajo en el post del foro</p>
<textarea name="gen2" cols="100" rows="20" id="gen2" onclick="javascript:formulario.gen.focus();formulario.gen.select();">Post No Generado</textarea
 

Al hace click, se lee el contenido de los input, se le añaden algunos bbcode ([img] [spoiler] [b]...) y se muestra todo en el textarea de nombre gen2

El problema viene cuanto intento hacer el código js lo mas "apretadito" posible para que el código sea lo mas pequeño posible...

si en todos los generadores, pongo el mismo id para el input "portada" luego en el js al hacer lo siguiente:

Código Javascript:

if (document.getElementById("portada").value != ""){
        txt = "";
        txt += "[rimg]";
        txt += document.getElementById("portada").value;
        txt += "[/rimg]";
        document.getElementById("gen2").value += txt;
    }
 

Aunque yo haya escrito en series, como películas está antes, (y ambos input tienen el mismo id) lo toma como vacío y no escribe nada... tengo que cambiar el id del input a "portada1" "portada2" y duplicar el if en el js....

Me gustaría saber si hay alguna forma de evitar esto, no tengo muchos conocimientos de js, voy aprendiendo poco a poco...

Quisiera una forma de poder llamar a todos los input portada con el id="portada" y que el js busque no solo en el primero, sino en el generador que está seleccionado, ademas de seleccionar el textarea que aparece con el generador

os pongo un enlace de google drive al generador, por si mi explicación no ha sido muy precisa:

https://googledrive.com/host/0B4CJd_I89bvVNmJoR1VQZlJ2WXc/nuevo.html

gracias, un saludo

[IsaBelM]

lo primero que has de hacer, es no repetir las "ids". en su lugar puedes usar los atributos (name o class). personalmente prefiero "class". para obtener todos los controles con un class determinado, usa el método querySelectorAll('.selector'). éste te genera un array con todos los controles que tengan ese class. a partir de ahí, accedes a cada control por su indice en el array

[tdguchi]

El problema es que las class ya las uso para dar estilos con css (por lo que habría mas de 1 campo con la misma class) y entonces no serviría..... en cuanto al atributo "name" según la especificación, un div no puede tener "name" .... por lo que solo tengo id... y tal y como dices, no es recomendable repetir ids....

[IsaBelM]

no me refería a los bloques, sino a los controles

<input class="muylargo" id="portada" type="url" placeholder="http://www.url.com">

[tdguchi]

los controles son iguales en todos los casos, no puedo "diferenciar" uno de otro, ya que hay muchos de class=largo o class=muylargo....

De todos modos he encontrado que es preferible meter algo de php en el código.... gracias por tu ayuda