title: created a button inside a div
body: <p>I have created a div inside which i have created a button to display a link when you click on it and i have duplicated the div three times but when i click on that button in a duplicated div it shows only on the first div(the original one) am using Tailwind Css
  below is the html code</p>
  <pre><code> &lt;div&gt;
                          &lt;div class=&quot;w-3/3 mx-2 sm:mx-0 md:mx-0 overflow-hidden shadow&quot;&gt;
                              &lt;img src=&quot;assets/img/python.jpg&quot; alt=&quot;&quot; class=&quot;object-cover&quot;&gt;
                              &lt;div class=&quot;mt-3 mx-2&quot;&gt;
                                  &lt;h1 class=&quot;font-semibold text-xl&quot;&gt;Lorem ipsum dolor sit amet…&lt;/h1&gt;
                                  &lt;div class=&quot;mt-5 flex items-center justify-between mb-4&quot;&gt;
                                      &lt;div class=&quot;flex items-center&quot;&gt;
                                        &lt;i class=&quot;far fa-star text-orange-400 mx-2&quot;&gt;&lt;/i&gt;
                                        &lt;i class=&quot;far fa-star text-orange-400 mx-2&quot;&gt;&lt;/i&gt;
                                        &lt;i class=&quot;far fa-star text-orange-400 mx-2&quot;&gt;&lt;/i&gt;
                                        &lt;i class=&quot;far fa-star text-orange-400 mx-2&quot;&gt;&lt;/i&gt;
                                        &lt;i class=&quot;far fa-star text-orange-400 mx-2&quot;&gt;&lt;/i&gt;
                                        (0)
                                      &lt;/div&gt;
                                      &lt;button class=&quot;bg-white focus:outline-none&quot; onclick=&quot;editCourse()&quot;&gt;
                                        &lt;i class=&quot;fas fa-ellipsis-v&quot;&gt;&lt;/i&gt;
                                      &lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;ml-64 -mt-4 sm:ml-32&quot; id=&quot;edit-course&quot;&gt;
                                &lt;button class=&quot;bg-red-500 rounded-full text-white px-2 ml-40 focus:outline-none&quot; onclick=&quot;closeEdit()&quot;&gt;
                                  &lt;i class=&quot;fas fa-times text-xs&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                              &lt;a href=&quot;add_courses.html&quot; class=&quot;bg-white ml-12 flex items-center -mt-1 shadow w-32 border border-gray-300 px-3 py-2&quot;&gt;
                                  &lt;i class=&quot;fas fa-pen mr-2&quot;&gt;&lt;/i&gt;
                                  &lt;span class=&quot;text-green-600&quot;&gt;Edit course&lt;/span&gt;
                                &lt;/a&gt;
                            &lt;/div&gt;
                         &lt;/div&gt;
  </code></pre>
  <p>the div above has been duplicated
  below is the JavaScript code</p>
  <pre><code>//edit course
  function editCourse(){
    var editBtn = document.getElementById('edit-course');
    editBtn.style.display = 'block';
  }
  // close edit course
  function closeEdit(){
    var closeBtn = document.getElementById('edit-course');
    closeBtn.style.display = 'none';
  }
  </code></pre>
  <p>here is how it looks in the browser when you click on any of the ellipsis button
  <a href="https://i.stack.imgur.com/1jb62.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1jb62.png" alt="enter image description here" /></a></p>