I want to set className for 2 input types, first is an input box and other is a button. Initially, both are hidden, and on click of a button, I want to show both of them. The catch here is that there are multiple grids being displayed (one for each record) and depending upon where the click happened, I'll be displaying their respective input box and button.
Now, I'm using below to display the input box:
this.template.querySelector(`[data-id="${targetId}"]`).className = "show";
I'm populating the data-id attribute on input type with record specific value to differentiate where the click occurred. Now, if I want to hide the button, I'll have to use a similar statement, but I need to still use data-id attribute value. How can I use both data-id and type ="button" with querySelector?
This works with "document.querySelectorAll", not positive about "this.template.querySelectorAll".
I am assuming that the input fields are always in the same order (input,button) and that they both have the same "data-id" value. And that it is unique to them (there are only two objects with this data-id value on the page).
onclick='x=this.template.querySelectorAll(`[data-id="targetId"]`);x[0].type="text";x[1].type="button";'