CRUD operation using JSOM

CRUD operation using JSOM

List Structure:

<SharePoint:ScriptLink name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false"/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript'>

'use strict'
    ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");

function initializePage()
{
                var context=SP.ClientContext.get_current();
                var web=context.get_web();
                var list=web.get_lists().getByTitle("companyinfo");
                var MainResult =""; //'Items in the Divisions list: <br><br>';
                var items=null;
             
               //Add New Item to List
                $("#btnAdd").click(function()
                {
                    context.load(list);
                    var comp=$("#txtCompany").val();
                    var ind=$("#txtIndustry").val();

                    var listItemCreationInfo=new SP.ListItemCreationInformation();
                    var listItem=list.addItem(listItemCreationInfo);

                    listItem.set_item("Company",comp);
                    listItem.set_item("Industry",ind);
                 
                    listItem.update();
                    context.load(listItem);
                    context.executeQueryAsync(OnSuccessAdd,OnFailureAdd);

                })
             
               //View List Item
                $("#btnView").click(function()
                {
                    view();
                })

               //Update List Item
                $("#btnUpdate").click(function()
                {
                    context.load(list);
                    var comp=$("#txtCompany").val();
                    var ind=$("#txtIndustry").val();

                    var listItemObj=list.getItemById(1);
                    listItemObj.set_item("Company",comp);
                    listItemObj.set_item("Industry",ind);
                 
                    listItemObj.update();
                    context.load(listItemObj);
                    context.executeQueryAsync(OnSuccessAdd,OnFailureAdd);

                })

               //Delete List Item
                $("#btnDel").click(function()
                {
                    context.load(list);

                    var listItemObj=list.getItemById(1);
                                                         
                    listItemObj.deleteObject();
                    context.executeQueryAsync(OnSuccessAdd,OnFailureAdd);

                })

                function view()
                {
                    context.load(list);
                    var query = new SP.CamlQuery(); //The Query object. This is used to query for data in the List
                    query.set_viewXml("<View></View>");
                    items = list.getItems(query);
                    context.load(items);
                    context.executeQueryAsync(OnSuccessView,OnFailureView);
                }

                function OnSuccessView()
                {
                    result.innerHTML="";
                    var lstEnumerator=items.getEnumerator();
                    while(lstEnumerator.moveNext())
                    {
                        var listItem=lstEnumerator.get_current();
                        var company=listItem.get_item("Company");
                        var ind=listItem.get_item("Industry");
                         MainResult += company + "-" + ind + "</br>";
                    }
                    result.innerHTML = MainResult;
                }
                function OnFailureView(sender,args)
                {
                    alert(args.get_message());
                }

                function OnSuccessAdd()
                {
                 view();
                }
                function OnFailureAdd(sender,args)
                {
                    alert(args.get_message());
                }
             
            }

</script>