djid_siput/resources/views/definisi-satuan/edit.blade.php

<?php $getStatus = \App\Model\Privillage\Role::where('id',Auth::user()->role_id)->value('akses'); ?>
@extends('dev.core.using')
@section('content')
<style>
 input, select {
     border: 0 !important;
     background: transparent !important;
     border-bottom: 1px solid #cdcdcd !important;
 }
 .tb-container{
   background: #fff;
   margin-top: 1em;
 }
 tbody > tr {
    line-height: 45px !important;
    min-height: 45px !important;
    height: 45px !important;
 }
</style>
<br/>
<br/>
<form action="{{route('definisi-satuan.update',$data->id)}}" method="POST" enctype="multipart/form-data" id="form-edit">
@csrf
  <div class="col">
      <div class="form-group">
          <label for="">Nama Option *</label>
          <input type="text" class="form-control" id="label" name="label" placeholder="No Data Available" value="{{$data->label}}" required>
          <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
      </div>
      
      <div class="row">
        <div class="col-md-10"></div>
        <div class="btn btn-primary" style="background: #B4CD93" id="add-item"><i class="fas fa-plus-circle"></i> Tambah Value</div>
      </div>
      <button type="button" class="btn btn-primary btn-lg btn-block" style="background: #193865;margin-top: 1em">Value Option</button>
    
    <div class="tb-container">
      <table class="table table-bordered">
          <thead >
            <tr class="table-dark">
              <th scope="col">Value</th>
              <th scope="col">Aksi</th>
            </tr>
          </thead>
          <tbody id="body">
              <input type="hidden" name="uniqids" id="uniqids">
              @foreach($data->masterOptionDetail as $key => $row)
                @php $uniqid = sprintf("%06d", mt_rand(1, 999999)); @endphp
                  <tr id="tr-{{$uniqid}}" class="item-program" item-id="{{$row->id}}">
                      <input type="hidden" name="id_{{$uniqid}}" value="{{$row->id}}">
                      <input type="hidden" class="uniqid" value="{{$uniqid}}">
                      
                      <td scope="row">
                          <input type="text" class="form-control value" value="{{$row->value}}" name="value_{{$uniqid}}">
                      </td>
                      <td>
                        <center><a data-id="{{$uniqid}}" onClick="removeData({{$uniqid}})"><i class="fas fa-trash" style="color: #E12D2D" ></i></a></center>
                      </td>
                  </tr>
              @endforeach
          </tbody>
      </table>
  </div>
</form>
<div class="tb-container">
  <div class="row" style="padding:20px">
    <div class="col-md-8"></div>
    <div class="col-md-4">
      <button type="button" class="btn btn-primary confirmation" id="btn-submit" data-target="form-edit" style="background: #193865"><i class="fa fa-save"></i> Simpan Perubahan</button>
      <a href="{{route('definisi-satuan')}}" class="btn btn-primary" id="btn-back" style="background: #fff;color: #193865">Batal</a>
    </div>
  </div>
</div>
  
<script>
 
</script>

<script>

    //action tambah item
    $('#add-item').on('click',function(){
      var uniqid = Date.now();
      //initialize attribute
      
      var id = '<input type="hidden" class="uniqid" value="'+uniqid+'">';
      //orderBy
      var value = '<td><input type="text" class="form-control value" value="" required name="value_'+uniqid+'"></td>';


      var aksi = '<td><center><a data-id="'+uniqid+'" onClick="removeData('+uniqid+')"><i class="fas fa-trash" style="color: #E12D2D" ></i></a></center></td>';
      
      var attribute = '<tr id="tr-'+uniqid+'">'+id+value+aksi+'</tr>';
      $('#body').append(attribute);
      

    });

    $('#btn-submit').on('click',function(){
        var uniqids = '';
        $('.uniqid').each(function(i, obj) {
          if(uniqids!=''){
            uniqids += ',';
          }

          uniqids += obj.value;
        });
        $('#uniqids').val(uniqids);
    });

    function removeData(uniqid){
      $('#tr-'+uniqid).remove();
    }
</script>
@endsection