in

Two divs having same class name and ID but at different component of the page. If I try to clear one input the other div input is also cleared


<div id="input-outer">
    <input type="text">
    <button id="clear" class="clear-icon">X</button>
</div>
<div id="input-outer">
    <input type="text">
    <button id="clear" class="clear-icon">X</button>
</div>

    $('.clear-icon').click(function(){
      $('input').val('');
     })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="input-outer">
        <input type="text">
        <button class="clear-icon">X</button>
    </div>
    <div id="input-outer">
        <input type="text">
        <button class="clear-icon">X</button>
    </div>

I am trying to clear one value alone but both the values are getting deleted. How can I control it by clearing only the input field of which button is clicked



Source: https://stackoverflow.com/questions/70541711/two-divs-having-same-class-name-and-id-but-at-different-component-of-the-page-i

Google Protocol Buffers Support Idiomatic Kotlin Bindings

blogdown::serve:site() error: Failed to launch site