자바스크립트로 html을 넣을때

var 템플릿 = '<img src="./img/%ED%8C%8C%EC%8A%A4%ED%83%80%EC%99%80%EC%9D%B81.jfif">

<img src="./img/%ED%8C%8C%EC%8A%A4%ED%83%80%EC%99%80%EC%9D%B82.jfif" style="height: 430px; margin-left: -40px">

<img src="./img/%ED%8C%8C%EC%8A%A4%ED%83%80%EC%99%80%EC%9D%B83.jfif" style="height: 430px; margin-right: 100px">'

$('#pasta').append(템플릿).show();
}
});

지금 이 상태인데 이미지 하나하나에 클릭할때마다 다른 모달창이 나오게 하고싶습니다ㅠㅠ그래서 제 생각에는 이미지 하나하나에 아이디나 클래스네임 붙여서 하려고했는데 그게 안돼서..다른방법이 있을까요?
 

템플릿 안에다가 클래스네임까지 붙여놓고 
콘솔로그로 그 클래스네임을 찍어봤더니 안나오네요ㅠㅠ그렇다는건 안붙여진건데 

var 템플릿 = '<img class="item1" src="./img/%ED%8C%8C%EC%8A%A4%ED%83%80%EC%99%80%EC%9D%B81.jfif">

<img src="./img/%ED%8C%8C%EC%8A%A4%ED%83%80%EC%99%80%EC%9D%B82.jfif" style="height: 430px; margin-left: -40px">

<img src="./img/%ED%8C%8C%EC%8A%A4%ED%83%80%EC%99%80%EC%9D%B83.jfif" style="height: 430px; margin-right: 100px">'
$('#pasta').append(템플릿).show()
}
});

console.log(item1)

이런식으로 한 상태입니다!