javascript - 为什么表单在javascript的所有行中都没有影响？

Question

我想创建一个评论框，但是当我单击回复按钮时，仅显示表单的第一行，其他表单无法显示，如何使用 javascript 创建多个显示表单？当我使用 php 从数据库中提取数据时出现这些问题

function replyFunction() {
    document.addEventListener(
        "click",
        function(event) {
            var target = event.target;
            var replyForm;
            if (target.matches("[data-toggle='reply-form']")) {
                replyForm = document.getElementById(target.getAttribute("data-target"));
                replyForm.classList.toggle("d-none");
                console.log(replyForm);
            }
        },
        false
    );
}
// i used javascript for loop but also I could not reach my goal.

.main-div_chat {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 37px;
    background-color: #f2efe4;
    border-radius: 22%/49%;
   background-size: 60px 61px;
       margin-right: 31px
}

.main-div_chat::after {
   content: '';
    position: absolute;
    left: 5px;
    top: -5px;
    width: 36px;
    height: 47px;
    background: inherit;
    background-size: inherit;
    border-radius: 51%/22%;
}
.avatar_follow_list_chat {
     width: 42px;
    height: 41px;
    position: absolute;
    border-radius: 43%/50%;
    left: 2px;
    top: -2px;
    z-index: 1;
    object-fit: cover;
}
.social_rpl {
  margin-top:0px;
}
.social-buttons_rpl {
  color: #7f7f7f;
  font-family: Helvetica;
  font-size: 12px;
  font-weight:bold;
  line-height:14px;
  text-align: center;
  padding-top:4px;
  padding-bottom: 3px;
  
}

.social-buttons_rpl button  {
  padding-right:10px;
}
.social_btn_rpl{
    margin-right: 10px;
    color: black;
    font-size: 12px;
    background: white;
    border: none;
    outline: none;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.hover_social_rpl {
 padding: 3px 0px 3px 0px;
    color: #717070;
    font-weight: 600;
}
.hover_social_rpl:hover {
     background: #d8d8d8;
     padding: 3px 5px 3px 5px;
     cursor:pointer;
     transition: all .3s ease-in-out;
     transform: translateY(calc(var(--base-grid)*-1));
}

@media only screen and (max-width: 1050px) {
  .award_btn {
    display: none;
  }

  .report_btn {
    display: none;
  }

  .save_btn {
    display: none;
  }
  
}
.trigger_popup_fricc_wrapper_comment {
 
      position: relative;
  display: inline-block;
}

.popupCloseButton_comment {
    background-color: #fff;
     border: 2px solid #c5c5c530;
    
     border-bottom: none;
   
    border-right: none;
    transform: rotate( 45deg );
    cursor: pointer;
    position: absolute;
    top: -9px;
    left: 50px;
    width: 16px;
    height: 16px;
    text-align: center;
}
.trigger_popup_fricc_comment {
  background: #ffffff;
      color: #717070;
    padding: 0px;
    font-size: 18px;
    border: none;
    cursor: pointer;

}
.trigger_popup_fricc_comment:hover {
  background-color: #717070;
   border-radius: 8px;
   color: #ffffff;
}
.hover_bkgr_fricc_comment{
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 100px;
  margin-left: -17px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.trigger_buttom{
  padding-left: 7px;
}
.hover_bkgr_fricc_comment a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
  .show_comment {display: block;}

  .reply-form .repley-input {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
    width: 100%;
    max-width: 100%;
    margin-top: 15px;
    margin-bottom: 5px;
    border: 1px solid #cccccc;
}

.repley_button{
       -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    font-size: 14px;
    padding: 4px 8px;
    color: rgba(0, 0, 0, 0.85);
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
.d-none {
    display: none;
}
.repley_button :hover,
.repley_button :focus,
.repley_button :active {
    cursor: pointer;
    background-color: #ecf0f1;
}

 
 <div class="social_rpl">
    <div class="social-content"></div>
    <div class="social-buttons_rpl">
           <button type="button" class="social_btn_rpl" >
         <span class="hover_social_rpl">
<svg  x="0px" y="0px"id="down_icon"  width="15.5" height="18.97"
   viewBox="0 0 512.171 512.171" style="enable-background:new 0 0 512.171 512.171;" xml:space="preserve">
<g>
  <g>
    <path d="M479.046,283.925c-1.664-3.989-5.547-6.592-9.856-6.592H352.305V10.667C352.305,4.779,347.526,0,341.638,0H170.971
      c-5.888,0-10.667,4.779-10.667,10.667v266.667H42.971c-4.309,0-8.192,2.603-9.856,6.571c-1.643,3.989-0.747,8.576,2.304,11.627
      l212.8,213.504c2.005,2.005,4.715,3.136,7.552,3.136s5.547-1.131,7.552-3.115l213.419-213.504
      C479.793,292.501,480.71,287.915,479.046,283.925z"/>
  </g>
</svg>
</span>
 </button>
 <span style="   margin-left: -8px; " >23k</span>
  <button type="button" class="social_btn_rpl" >
       <span class="hover_social_rpl">

<svg id="up_icon" id="Capa_1" x="0px" y="0px"  width="15.5" height="18.97"
 viewBox="0 0 512.171 512.171" style="enable-background:new 0 0 512.171 512.171;" xml:space="preserve">
<g>
  <g>
    <path d="M476.723,216.64L263.305,3.115C261.299,1.109,258.59,0,255.753,0c-2.837,0-5.547,1.131-7.552,3.136L35.422,216.64
      c-3.051,3.051-3.947,7.637-2.304,11.627c1.664,3.989,5.547,6.571,9.856,6.571h117.333v266.667c0,5.888,4.779,10.667,10.667,10.667
      h170.667c5.888,0,10.667-4.779,10.667-10.667V234.837h116.885c4.309,0,8.192-2.603,9.856-6.592
      C480.713,224.256,479.774,219.691,476.723,216.64z"/>
  </g>
</svg>
</span>
      </button>
      
     <button type="button" onclick="replyFunction()" id="reply-form"  data-toggle="reply-form" data-target="comment-2-reply-form" class="social_btn_rpl" >
        <span class="hover_social_rpl" data-toggle="reply-form" data-target="comment-2-reply-form"> 
         Replys
        </span>
  </button>
  
   <button type="button" class="social_btn_rpl" >
         <span class="hover_social_rpl">
        Shares
        </span>
       </button>
  <button type="button" class=" award_btn social_btn_rpl" >
      <span class="hover_social_rpl">
        Give Awards
        </span>
         
    </button>
     <button type="button" class="report_btn social_btn_rpl" >
         <span class="hover_social_rpl">
        Reports
        </span>
       </button>
       <button type="button" class="save_btn report social_btn_rpl" >
         <span class="hover_social_rpl">
        Saves
        </span>
       </button>
        
       <div class="trigger_popup_fricc_wrapper_comment">
  <button onclick="myFunction()" class="trigger_popup_fricc_comment">...</button>
  <div id="myDropdown_comment" class="hover_bkgr_fricc_comment">
    <a href="#home">Give Award</a>
    <a href="#about">Report</a>
    <a href="#about">Edit</a>
    <a href="#contact">Save</a>
  </div><!-- hover_bkgr_fricc  --> 
</div><!-- trigger_popup_fricc_wrapper_comment  --> 
    </div><!-- social-buttons -->

  </div><!-- social ecnd -->
  
 <form method="POST"  class="reply-form  d-none" id="comment-2-reply-form">
                        <textarea  class="repley-input" placeholder="Reply to comment" rows="4"></textarea>
                        <button class="repley_button" type="submit">Submit</button>
                        <button class="repley_button" type="button" data-toggle="reply-form" data-target="comment-2-reply-form">Cancel</button>
 </form>

标签： javascripthtmlcss