title: React: How can I remove a specific div element after clicking its associated button?
body: <p>I have this component which adds a div and its elements to the dom on button click. The adding part works fine as expected but the issue arises when I want to delete.</p>
  <p>Right now when I click on the delete button, it does remove the item but it doesn't remove that specific item which the button is associated with. It just removes the div from the top or bottom.</p>
  <p>I have been trying to remove that specific div whose button has been clicked to remove. How can I achieve that?</p>
  <p>Here's the <a href="https://wotm1.csb.app/" rel="nofollow noreferrer">CodeSandbox</a>.</p>
  <p>And here's the code:</p>
  <pre><code>import { useState } from &quot;react&quot;;
  
  const App = () =&gt; {
  
    const [ counter, setCounter ] = useState( 1 );
  
    const handleAddDiv = () =&gt; {
      setCounter( counter + 1 );
    };
  
    const handleRemoveDiv = () =&gt; {
      setCounter( counter - 1 );
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
  
        {
          Array.from(Array( counter )).map(( item, idx ) =&gt; (
             &lt;div&gt;
               &lt;div&gt;
                 &lt;input type=&quot;text&quot; /&gt;
                 &lt;button onClick={handleRemoveDiv}&gt;Remove&lt;/button&gt;
               &lt;/div&gt;
             &lt;/div&gt;
          ))
        }
  
        &lt;button onClick={handleAddDiv}&gt;Add&lt;/button&gt;
  
      &lt;/div&gt;
    );
  }
  export default App;
  </code></pre>