JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
 <input type="hidden" value="Survey one" id="survey_name">
     <input type="hidden" id="cmp_name" value="Efficienza&co233">
     <input type="hidden" id="contact" value="contact one">
     <input type="hidden" id="address1" value="No:3\34, vada&# ">
     <input type="hidden" id="address2" value="chennai">
     <input type="hidden" id="mobile" value="9874563224">
     <input type="hidden" id="date" value="Feb-2020">
     <input type="hidden" id="logo" value="cmp.png">

     <input type="hidden" id="encode_logo"
        ...

JavaScript

var survey_name = $("#survey_name").val();
var cmp_name = $("#cmp_name").val();
var contact = $("#contact").val();
var address1 = $("#address1").val();
var address2 = $("#address2").val();
var mobile = $("#mobile").val();
var date = $("#date").val();
var logo = $("#logo").val();
var encode_logo = $("#encode_logo").val();
var no_of_vendor = $("#no_of_vendor").val();
var response_ven = $("#response_ven").val();

$('#vendor_category').select2( );

var table = $('#sur_report').DataTable({
    "footerCallback": function (row, data, start, end, display) {
        var api = this.api();

        for (var i = 2; i <= 6; i++) {

            api.columns(i, {
                page: 'current'
            }).every(function () {
                var sum = this.data().reduce(function (a, b) {
                    var x = parseFloat(a) || 0;
                    var y = parseFloat(b) || 0;
                    return x + y;
                }, 0);
                $(this.footer()).html(sum);
            });

        }

    },

    dom: 'lBfrtip',
    "bFilter": false,
    pageLength: 5,
    lengthMenu: [5, 10, 20, 50, 100, 200, 500],
    buttons: [{
        "extend": 'excelHtml5',
        "text": 'Export As Excel',
        "className": 'btn btn-success btn-sm',
        "filename": 'Survey Report',
        "title": '',
        "footer": true,
        customize: function (xlsx) {
            var survey_name = $("#survey_name").val();
            var cmp_name = $("#cmp_name").val();
            var date = $("#date").val();
            var vendor = $("#vendor_category option:selected").text();
            if (vendor == "") {
                var vendor_category = "";
            } else {
                var vendor_cate = $("#vendor_category option:selected").map(function () {
                    return this.text
                }).get().join(', ');
                var vendor_category = 'Vendor Category : ' + vendor_cate;
            }
            var no_of_vendor = $("#no_of_vendor").val();
...