如何在Laravel PHP中克隆具有相同数据的选项卡

Question

so im trying to do a cloning function. So i have put two tabs and a button to add a tab, so when i click that button a new tab with "LEG 2" suppose to be created with the same data as in previous tabs. How can i do that?

 <ul id="tabs" class="nav nav-tabs nav-tabs-linetriangle" data-init-reponsive-tabs="dropdownfx"> <li class="active"> <a data-toggle="tab" href="#1"><span>LEG 1</span></a> </li> <li> <button class="btn alt-btn-black btn-xs alt-btn newTravelLegButton" type="button" > <i class="fa fa-plus" aria-hidden="true" color="black"></i> </button> </li> </ul> 

 <div class="tab-content"> <div class="tab-pane active" id="1"> <div class="row"> sdfsdfdsfsf </div> </div> </div> 

Answer 1

You can add following jQuery code in your view to achieve your requirement:

<script>
$(document).ready(function(){
    var i = 1;
    $('.newTravelLegButton').click(function(){
        $('#tabs li').removeClass('active');
        $('.tab-pane').removeClass('active');
        i++;
        tabHTML = '<li  class="active">';
        tabHTML += '<a data-toggle="tab" href="#1"><span>LEG '+i+'</span></a>';
        tabHTML += '</li>';

       contentHTML = '<div class="tab-pane active" id="'+i+'">';
        contentHTML += '<div class="row">';
        contentHTML += $('#'+(i-1)).html();
        contentHTML += '</div>';
        contentHTML += '</div>';

       lastLI = $('.newTravelLegButton').closest('li');
        $( tabHTML ).insertBefore( lastLI );
        $('.tab-content').append(contentHTML);

   });
});
</script>