Only one image is getting annotated.

[Anandks1993]

I am using this library with react js. I am rendering 6 images and added the class name as annotatable to it. But annotation is applied only to the first image, leaving the other images.

Below is the code I used to load image.

render() {
        const images = [
            {
                src: 'src/img/microsemi/PN_Datasheet_Microsemi_2N2907AUBC-1.jpg',
            },
            {
                src: 'src/img/microsemi/PN_Datasheet_Microsemi_2N2907AUBC-2.jpg',
            },
            {
                src: 'src/img/microsemi/PN_Datasheet_Microsemi_2N2907AUBC-3.jpg',
            },
            {
                src: 'src/img/microsemi/PN_Datasheet_Microsemi_2N2907AUBC-4.jpg',
            },
            {
                src: 'src/img/microsemi/PN_Datasheet_Microsemi_2N2907AUBC-5.jpg',
            },
            {
                src: 'src/img/microsemi/PN_Datasheet_Microsemi_2N2907AUBC-6.jpg',
            },
        ];

    return (
        <div className="grand-parent">
                {
                    _map(images, (img, index) => {
                            return (
                                <div
                                    style={{ height: `${PDFCoord.tet.TET.Document.Pages.Page[0].height}px`, width: `${PDFCoord.tet.TET.Document.Pages.Page[0].width}px` }}
                                    className='parent' 
                                    key={index}>
                                        <img
                                            className='annotatable image'
                                            src={img.src} />
                                </div>
                            )
                        })
                    }
            </div>
    )
}

Can somebody please help me to resolve this issue. Thanks in advance.

[nagarajuchappa]

you need to create new anno object for each image ,

like window.anno = new Y; anno.makeAnnotatable(imageEl);

[nagarajuchappa]

If you want to annotate multiple images , then you need create new anno object and make annotate by image id ,i mean image element like window.anno = new Y; anno.makeAnnotatable(imageEl);

Each image need to has different id's

[Anandks1993]

Thank you @nagarajuma it worked.