Problema con childs y parents

[neodani]

Buenas,

Tengo un problema de padres e hijos que no consigo resolver por más vueltas que le doy, y no parece dificil a priori, pero no lo consigo

Resulta que tengo un listado de productos <ul> </ul> cada <li> es un producto diferente. Dentro de cada <li> existe un botón para "sugerir", que lo único que hace es ocultar 3 divs y mostrar uno que está oculto, y si vuelve a pulsar lo deja todo como estaba antes.
Esto me funciona de forma individual para un producto, pero al haber más productos no consigo individualizar para que solo afecte al producto al cual he clicado.

Mi problema está a la hora de aplicar los efectos de ocultar y mostrar.

Estos son los efectos:

Código Javascript:

$(".sugerir").click(function () {
        if ($(".sugerir").hasClass('activo')){
            $(".sugerir_categoria").fadeOut("fast", "linear");
            $(".info1").delay(300).fadeIn("fast", "linear");
            $(".info2").delay(300).fadeIn("fast", "linear");
            $(".info3").delay(300).fadeIn("fast", "linear");
            $(".sugerir#oferta1").toggleClass("activo");
        }else{
            $(this).toggleClass("activo");
            $(".info1").fadeOut("fast", "linear");
            $(".info2").fadeOut("fast", "linear");
            $(".info3").fadeOut("fast", "linear");
            $(".sugerir_categoria").delay(300);
            $(".sugerir_categoria").fadeIn("fast", "linear");
        }
    });
 

Y esta es la estructura html, he eliminado el contenido de las etiquetas para simplificar.

Código HTML:

<ul class="listado" id="items">
    <li id="ofer1" class="producto">        
    <div>
        <span class="category">
            <span class="sugerir" id="ofer1"></span>
        </span>
    </div>
    <div class="content_producto">
        <a class="titulo"></a>
        <p class="descripcion"></p>     
        
        <!-- Esta es la capa que se MUESTRA -->
        <div class="sugerir_categoria" id="ofer1"></div>
 
        <!-- Esta son las 3 capas que se OCULTAN -->        
        <div class="info1"></div>
        <div class="info2"></div>
        <div class="info3"></div>
    </div>
    </li>
    
    <li id="ofer2" class="producto">
    ....
    </li>
</ul>
 

Debo cambiar algo del html para que sea más fácil de identificarlo con jquery?

¿Sabéis cómo debo hacerlo?

Muchas gracias de antemano!