<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<style>   
*{   
  margin:0;   
  padding:0; 
}   
.kommentare{  
  height:20px;  
} 
#kommentarspalte{   
  width:100%;   
  display:inline-block;   
  background:lightgrey;   
  min-height:40px;   
  height:40px;   
  overflow:hidden;   
  border:2px solid red; 
} 
#mehr{   
  position:fixed;   
  left:600px;   
  top:20px;  f
  ont-size:30px;   
  text-align:center;
} 
textarea{   
    text-align:center;   
    height:100px;   
    width:60%;   
    margin-left:20%;
  } 
  #komsend{   
      text-align:center;   
      width:300px;   
      margin-left:calc(50% - 150px);   
      height:30px;   
      font-size:25px;   
      border-radius:5px;   
      border:2px solid black;   
      box-shadow:2px 2px 2px; 
  } 
</style> 
<div id="kommentarspalte">  
  <div id="helfer"> 
    <div id="kommentare1" class="kommentare">Hallo</div> 
    <div id="kommentare2" class="kommentare">tschüss</div> 
  </div> 
</div> 
<span>  
  <input type="button" class="but" data-wert="1" id="a2" value="Zeige alle Beiträge"> 
</span><br> 
<textarea id="komschr"></textarea><br> 
<button id="komsend">senden</button> 
</div> 
<script> 
var d=3;  
document.getElementById('komsend').onclick=function(){    
    var kommi = document.createElement("div");    
    d++; 
    kommi.id="kommentare"+d;    
    kommi.innerHTML=document.getElementById("komschr").value+' test '+d;
    kommentarspalte.appendChild(kommi);    
    h=$('.but').data('wert');        
    if(h==2){    
    }else{        
        h=d-3;        
        pix1=h*18; 
        $('#helfer').css('marginTop','-'+pix1+'px'); 
    }  
    buttons(); 
}     
$('.but').click(function(){     
    pix2=d*18;
    h=$('.but').data('wert');     
    if(h==2){         
      $('.but').data('wert','1');         
      $('.but').attr('value','Zeige mehr');
      h=d-3;         
      pix1=h*18;         
      $('#helfer').css('marginTop','-'+pix1+'px');
      $('#kommentarspalte').css('height','40px');     
    } else{         
      $('.but').data('wert','2');         
      pix2=d*18;         
      $('.but').attr('value','wenniger');         
      $('#helfer').css('marginTop','0px');         
      $('#kommentarspalte').css('height','auto');   
    } 
}); 
</script>