created a button inside a div

Question

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

 <div>
                        <div class="w-3/3 mx-2 sm:mx-0 md:mx-0 overflow-hidden shadow">
                            <img src="assets/img/python.jpg" alt="" class="object-cover">
                            <div class="mt-3 mx-2">
                                <h1 class="font-semibold text-xl">Lorem ipsum dolor sit amet…</h1>
                                <div class="mt-5 flex items-center justify-between mb-4">
                                    <div class="flex items-center">
                                      <i class="far fa-star text-orange-400 mx-2"></i>
                                      <i class="far fa-star text-orange-400 mx-2"></i>
                                      <i class="far fa-star text-orange-400 mx-2"></i>
                                      <i class="far fa-star text-orange-400 mx-2"></i>
                                      <i class="far fa-star text-orange-400 mx-2"></i>
                                      (0)
                                    </div>
                                    <button class="bg-white focus:outline-none" onclick="editCourse()">
                                      <i class="fas fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                          </div>
                          <div class="ml-64 -mt-4 sm:ml-32" id="edit-course">
                              <button class="bg-red-500 rounded-full text-white px-2 ml-40 focus:outline-none" onclick="closeEdit()">
                                <i class="fas fa-times text-xs"></i>
                              </button>
                            <a href="add_courses.html" class="bg-white ml-12 flex items-center -mt-1 shadow w-32 border border-gray-300 px-3 py-2">
                                <i class="fas fa-pen mr-2"></i>
                                <span class="text-green-600">Edit course</span>
                              </a>
                          </div>
                       </div>

the div above has been duplicated below is the JavaScript 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';
}

here is how it looks in the browser when you click on any of the ellipsis button

Answer 1

If i am understood right you should try to use uniqe id's for each course.

 <div class="ml-64 -mt-4 sm:ml-32" id="edit-course-1">
      <button class="bg-red-500 rounded-full text-white px-2 ml-40 focus:outline-none" onclick="closeEdit('edit-course-1)">
           <i class="fas fa-times text-xs"></i>
       </button>
       <a href="add_courses.html" class="bg-white ml-12 flex items-center -mt-1 shadow w-32 border border-gray-300 px-3 py-2">
              <i class="fas fa-pen mr-2"></i>
              <span class="text-green-600">Edit course</span>
         </a>
  </div>

  <button class="bg-white focus:outline-none" onclick="editCourse('edit-course-1')">
           <i class="fas fa-ellipsis-v"></i>
   </button>

function editCourse(id){
  var editBtn = document.getElementById(id);
  editBtn.style.display = 'block';
}

function closeEdit(id){
  var closeBtn = document.getElementById(id);
  closeBtn.style.display = 'none';
}