jquery - Dynamic id for div tag in partial View -

i trying add partial view dynamically main view. problem not able dynamic id div tag in partial view when add main view multiple times.

as not able id, unable hide partial view based on div tag. can please suggest me missing. in advance help. below piece code:

partial view:

<div id=@viewbag.divactionid>     <div id="div_actionsbtns">         <img src="~/images/trash.png" alt="delete" class="editbtn" id="btn_actiondelete" />         <img src="~/images/move.png" alt="move" class="editbtn" id="btn_actionmove" />     </div>      <div id="div_editactions">         ......     </div> </div>  <script>     jquery(document).ready(function ($) {         $('#btn_actiondelete').on('click', function () {             var divparent = $('#div_editactions').parent().attr('id');             $('#divparent').hide()         }); </script> 

controller code:

public actionresult createnewactions(string actionid) {     viewbag.divactionid = actionid;     return partialview("~/views/interp/_addactions.cshtml"); } 

main view:

<div>      <div id="actions"></div> </div>  <script type="text/javascript">     var actionidcounter = 0;      $("#btn_addactions").on('click', function () {                             actionid = "actionid" + actionidcounter;          $.ajax({             async: false,             data: { 'actionid': actionid },             url: '/home/createnewactions'         }).success(function (partialview) {                         actionidcounter++;                             $('#actions').append(partialview);         });     }); </script> 

your partial view should not have hard coded static id values rendering same partial view on , on when user clicks add button. produce more 1 element same id value , jquery selector gives first item in array when use id selector. also duplicate ids in html invalid!

what should use css class selector , use jquery relative selectors. may use jquery closest method so. not need delete button click code in partial view. need include once in main view.

update partial view content have css class delete button

<div class="action-item" id="@viewbag.divactionid">     <div id="div_actionsbtns">         <img src="~/images/trash.png" alt="delete" class="editbtn delbtn"  />         <img src="~/images/move.png" alt="move" class="editbtn"  />     </div>         <div id="div_editactions">         <p>currently showing actions @viewbag.divactionid</p>     </div> </div> 

now in main view, listen click event of button css class "delbtn" , outer container div using closest method , hide/remove needed.

so code in main view be

@section scripts {     <script>          var actionidcounter = 0;         $(function () {             //register add button handler              $("#btn_addactions").on('click', function () {                 actionid = "actionid" + actionidcounter;                  $.ajax({                                            data: { 'actionid': actionid },                     url: '@url.action("createnewactions")'                 }).then(function (partialview) {                     actionidcounter++;                     $('#actions').append(partialview);                 });             });              //register delete button handler               $(document).on("click", ".delbtn", function () {                   $(this).closest(".action-item").remove();             });         });      </script> }