You already accomplished the first part. Second part is slightly different. It should dynamically change as user picks a different “Date In” value. So, replace below:

//date_out disable javascript
var de = $('#tanggal_mulai').val();
de.setDate(de.getDate() + 8);
var dayen = de.toISOString().split('T')[0];
document.getElementsByName("date_out")[0].setAttribute('min', dayen);

with something like this:

$("#date_in").change(function(e) {
    var de = new Date($('#date_in').val());  // I guess tanggal_mulai is a typo or something
    de.setDate(de.getDate() + 8);
    var dayen = de.toISOString().split('T')[0];
    document.getElementsByName("date_out")[0].setAttribute('min', dayen);
});

You used both jQuery $() and vanilla JS (document.getElementByName) styles to retrieve objects. I did not touch those, but highly recommend being consistent.

So on the first form I want to disable the date, 7 days after today and it was succeed
But on the second form I want to disable the date, 7 days after date_in form was filled but it’s not working.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//date_in or first form

<div class="form-group">
  <label for="date_in">Date In</label>
  <input class="form-control" type="date" id="date_in" name="date_in" required>
</div>

//date_out or second form

<div class="form-group">
  <label for="date_out">Date Out</label>
  <input type="date" class="form-control" id="date_out" name="date_out">
</div>


<script>
  //date_in disable javascript
  var dt = new Date();
  dt.setDate(dt.getDate() + 8);
  var dayaf = dt.toISOString().split('T')[0];

  document.getElementsByName("date_in")[0].setAttribute('min', dayaf);


  //date_out disable javascript

  var de = $('#date_in').val();
  de.setDate(de.getDate() + 8);
  var dayen = de.toISOString().split('T')[0];


  document.getElementsByName("date_out")[0].setAttribute('min', dayen);
</script>