# Cloning an image as button

**URL:** <https://community.thunkable.com/t/cloning-an-image-as-button/2113381>\
**Category:** Questions about Thunkable X\
**Created:** [November 3, 2022, 8:30pm UTC](https://community.thunkable.com/t/cloning-an-image-as-button/2113381 "2022-11-03T20:30:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![proximilius](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/proximilius/32/140171_2.png) [@proximilius](https://community.thunkable.com/u/proximilius)\
**Post date:** [November 3, 2022, 8:30pm UTC](https://community.thunkable.com/t/cloning-an-image-as-button/2113381/1 "2022-11-03T20:30:15Z")

</div>

Hi there,

I’m trying to clone a set of images as clickable buttons.  
When I click on any clone I need to detect in the “on click” block witch button image is clicked.

The idea is that inside the click block I call a function where I do somethings with a ID. Every clone should have an ID that I want to relate to a database record. This way I then can get some info about the clicked button to do things according it’s database info. For example I have an unique text in database record for every button. That text is send to a function after click.

I now have these blocks where I’m able to clone an image that is invisible for origin, and after the clone it pops up. All works but now the dynamic click event.

 ![blocks](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/0/f0ecabef24a1db4fee9c425d49b5cbefea707af4.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [November 3, 2022, 10:44pm UTC](https://community.thunkable.com/t/cloning-an-image-as-button/2113381/2 "2022-11-03T22:44:06Z")

</div>

The way to do click detection for cloned components is to use the `find first occurrence of item` block to determine where the button/image is that was clicked. So for example, if I have two buttons in a row and I clone that row a bunch of times, if I use the `find first occurrence` block and it returns 8, then I know that the second button in the fourth row was clicked because my buttons are arranged like this:

1 2  
3 4  
5 6  
7 8

So I can divide the value by 2 to get the row number and I might have to a little creative mathematically to get whether it’s the left or right button. I can also access the button’s properties without that by just using the green `component` block. Here’s an example. Typically, I would use the list `all button` in `screen` or in `container` but in this screenshot I’m using a loop through all of the containers in a layout (beta version).

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/3/5354694889d177f5bc0c7a378d454686fc9ad7ae.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [February 1, 2023, 10:44pm UTC](https://community.thunkable.com/t/cloning-an-image-as-button/2113381/3 "2023-02-01T22:44:26Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
