Jquery Selector optimization for multiple clicks I have multiple inputs that each one has an increment and decrement button 

The buttons will be pressed multiple times so i am looking to optimize my selector:

So should i keep the first one (which selects by attribute) or the second? Or anything more optimized.

$("[data-id-col="+thisID+"]")

$("input:tel#"+thisID+")

$("body").on('click','.incButton',e=&gt;{
    let thisID = e.currentTarget.getAttribute("d-id");
    let colInput = $("[data-id-col="+thisID+"]");   
    colInput.val( parseInt( colInput.val())+1);
    colInput.change();
});


Html:

Input

&lt;div class="handle-counter" id="handleCounter3"&gt;
    &lt;input type="tel" data-id-col="8900" id="qty_inputCol" class="qty_col"&gt;
&lt;/div&gt;


Button

&lt;button type="button" d-id="8888" class="btn btn-primary btn-block inc"&gt;&lt;/button&gt;


https://learn.jquery.com/performance/optimize-selectors/
Your second selector doesn't work with the data provided input:tel#8888 is not the id= of the input.  

IDs should start with a letter (for compatibility), so if you changed your input to &lt;input id="inp8888"&gt; then you could use input:tel#inp8888 in which case, you can use $("#inp8888") as long as your IDs are unique (which they should be).

Selecting by ID is the fastest selection method. 


  jQuery uses document.getElementById(), which is faster


https://learn.jquery.com/performance/optimize-selectors/#id-based-selectors