JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<span>
    <input type="button" value="Click to add a new row" />
</span>
 <nav id=tableau>
            <span>Medium ID</span>
            <span>URL</span>
            <span>Description</span>
            <span>Correct side</span>
            <span>Number of ratings</span>
            <span>Percentage of correct answers</span>
</nav>
<article class=article>
      
    <ul class=userMedia>
        
   </ul>

</article>

CSS

.article {
overflow:auto;
height: 100px!important;
width:400px;
border-bottom: 2px solid red;
}


.userMedia {
width: 100%;
}

.userMedia li{
width:100%;
height:20px;
clear:both;
display:block;
}

.userMedia tr th,#tableau span{
width: 138px;
margin:0 0 0 4px;
    float:left;
}

.deLine{z-index:101010010101001}

JavaScript

var rownum = 1;
$('input').click(function () {
    $('ul.userMedia').append('<li id=row-' + rownum + '><span>' + rownum + ': id</span><span>' + rownum + ': row</span><span>' + rownum + ': row</span><span>' + rownum + ': row</span><span>' + rownum + ': row</span><span>' + rownum + ': row</span><button class=editLine>edit</button> <button class=delLine>delete</button></li>');
    var $row = $('#row-' + rownum);
    var topOffset = $(".article").scrollTop() + $row.position().top;
    $(".article").animate({scrollTop: topOffset + "px"}, 400);
    
         $(".delLine").click(function() {
      $(this).parent().remove();
});
  $(".editLine").click(function() {
    var liEdit =  $(this).parent();
     $('body').append(liEdit);
});
    rownum++;
});