Add disabled attribute to button inside DataList using Javascript?

Question

I have 3 buttons test1,test2,test3 they are belong to a DataList and the datalist have ten or twenty raw it depends. What i want to do is on the test2 and test3 are having attribute disabled i want to remove the attribute of test2 on test1 click and on test2 remove the attribute of test3 and on test3 click add the attribute to all button again.Iam able to remove and add attribute like i wish but the problem is since the button is inside the datalist when the test1 is clicked all raws with test2 is being clicked.How can i achieve it for each raw i have tried like below couldt get through

 $(document).on('click', '#test1', function() { document.getElementById('test2').removeAttribute('disabled'); }) $(document).on('click', '#test2', function() { var elementHtml = document.querySelectorAll("[data-id]")[0].innerHTML; alert(elementHtml); addattribute(elementHtml); }); function addattribute(test) { var dataidd = test; document.querySelectorAll("[data-idd]").addAttribute('disabled'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="test1" data-id="test1" style="width:100px;height:30px;"> test1 </button> <button id="test2" disabled="true" data-id="test1" style="width:100px;height:30px;"> test2 </button> <button id="test3" style="width:100px;height:30px;"> compare </button>

Each button in the raw have same data-id so i tried to use it but no luck how can i achieve this

Answer 1

You cannot use id for buttons because there are several rows(I think raw is a misspelled word for row) in DataList and id should be only used one-time for the page. So, you can use class for this position.
You add id or data-index attribute to div element of each row for identifying them, but it's not required for this position. Please check the following codebase.

 $(document).on('click', '.btn-test1', function() { $(this).siblings('.btn-test2').removeAttr('disabled'); }) $(document).on('click', '.btn-test2', function() { $(this).siblings('.btn-test3').removeAttr('disabled'); }); $(document).on('click', '.btn-test3', function() { $(this).siblings().attr('disabled', true); });

 <div data-index="0"> <button class="btn-test1" style="width:100px;height:30px;"> test1 </button> <button class="btn-test2" disabled="true" style="width:100px;height:30px;"> test2 </button> <button class="btn-test3" disabled="true" style="width:100px;height:30px;"> compare </button> </div> <div data-index="1"> <button class="btn-test1" style="width:100px;height:30px;"> test1 </button> <button class="btn-test2" disabled="true" style="width:100px;height:30px;"> test2 </button> <button class="btn-test3" disabled="true" style="width:100px;height:30px;"> compare </button> </div> ... <div data-index="9"> <button class="btn-test1" style="width:100px;height:30px;"> test1 </button> <button class="btn-test2" disabled="true" style="width:100px;height:30px;"> test2 </button> <button class="btn-test3" disabled="true" style="width:100px;height:30px;"> compare </button> </div>