Why value is coming same on click?

I have two Table TR there is define control types with fa-chevron-down font awesome icon.

I want:
When i click on fa-chevron-down font awesome icon then open a control types now its two types (input control and email control) but it may be multiple.

When i click on control types then it is change the main value which are given in Table TR.

It is working fine for first fa-chevron-down font awesome icon click when i click on second fa-chevron-down then both Table TR value changed, why i'm not able to understand.

My Code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

 $('body').on('click', '.select-response-type-btn', function (e) {
var thisClick = $(this);
$('.select-response-type-box').show();
$('.response-menu-item').click(function () {
var thisMunuItemHtml = $(this).html();
$('.select-response-type-box').hide();
$(thisClick).prev('.response-menu-item').html(thisMunuItemHtml);
});
});

<!-- language: lang-css -->

        .d-custom-none{ display: none;}
.select-response-type-box{ border: 1px solid #ccc; padding: 10px;}

<!-- language: lang-html -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"
integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
<table class="table table-bordered">
<tbody>
<tr>
<td>
<div class="type-selector">
<div class="response-menu-item">
<div class="selected-icon-circle icon-text-light-green">
<i class="far fa-calendar-alt"></i>
</div>
<span>Date & Time</span>
</div>
<i class="fas fa-chevron-down chevron-custom select-response-type-btn" id="type_btn1"></i>
</div>
</td>
</tr>
<tr>
<td>
<div class="type-selector">
<div class="response-menu-item">
<div class="selected-icon-circle icon-text-light-green">
<i class="far fa-calendar-alt"></i>
</div>
<span>Date & Time control</span>
</div>
<i class="fas fa-chevron-down chevron-custom select-response-type-btn" id="type_btn2"></i>
</div>
</td>
</tr>
</tbody>
</table>
<div class="select-response-type-box d-custom-none">
<div class="response-menu-item">input control</div>
<div class="response-menu-item">email control</div>
</div>

<!-- end snippet -->

Answer will appreciated!

I spent a lot of time made an working example.
jsfiddle

var clickIndex = 0;
$('body').on('click', '.select-response-type-btn', function () {
clickIndex = $(this).parent().parent().parent().index();
console.log(clickIndex);
var thisClick = $(this);
$('.select-response-type-box').show();
$('.response-menu-item').click(function () {
var thisMunuItemHtml = $(this).html();
$('.select-response-type-box').hide();
$('.type-selector').find('.response-menu-item').eq(clickIndex).html(thisMunuItemHtml);
//$(thisClick).prev('.response-menu-item').html(thisMunuItemHtml);
});
});

1. Why you use HTML Table ?? It's hard to get index between div and tr.

2. The most important is jquery selector .select-response-type-btn return wrong position. you must print click index like clickIndex = $(this).parent().parent().parent().index(); if clickIndex return correct index then your example will working.