Multiple tables have same id and overlap

Hello,

I have three tables on same page.

The table data is fetched at once and divided into three tables.

When I load table data, sometimes two tables overlap and have same id.

Here is elements on console.

<div id="myTable1">
	<div id="hot1494405560304" style="blahblah" data-originalstyle="blahblah" class="handsontable" data-initialstyle="blahblah">
		<div class="ht_master handsontable innerBorderLeft" style="position: relative;">...</div>
		<div class="ht_master handsontable" style="position: relative;">...</div>
		<div class="ht_clone_top handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden; width: 1170px; height: 50px;">...</div>
		<div class="ht_clone_left handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">...</div>
		<div class="ht_clone_top handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden; width: 1170px; height: 116px;">...</div>
		<div class="ht_clone_left handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden; height: 195px; width: 251px;">...</div>
		<div class="ht_clone_top_left_corner handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden; height: 116px; width: 251px;">...</div>
	</div>
</div>
<div id="myTable2">
	<div id="hot1494405560304"></div>
</div>
<div id="myTable3">
	<div id="hot1494405560305" style="..." data-originalstyle="..." class="handsontable">
		<div class="ht_master handsontable innerBorderLeft" style="position: relative;">...</div>
		<div class="ht_clone_top handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden; width: 1170px; height: 116px;">...</div>
		<div class="ht_clone_left handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden; height: 374px; width: 246px;">...</div>
		<div class="ht_clone_top_left_corner handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden; height: 116px; width: 246px;">...</div>
</div>

It does not happen every time, but happens often.

How can I ensure tables are rendered individually?

Sorry for wrong question.

It’s about react-handsontable.

I’ve solved.

1 Like

ok, thanks for a quick update.

hi @mon12jung

I am also having the same problem thst you are having. I am wondering what your solution was to solve this problem!

Thanks!